array e immagini

**marcosonoio** · 29-04-2009, 22:15

ciao a tutti,
sono alle prime armi con javascript e come primo esperimento sono riuscito a tirar su una galleria di immagini, ma in un modo piuttosto macchinoso e difficilmente implementabile in un'altra pagina web.

ora volevo provare a scrivere qualcosa di più flessibile, in modo che tutto si adatti anche a pagine web diverese.

teniamo in considerazione un div, contenenti collegamenti a 5 immagini, con relativi thumbail:

codice:

<div id="gallery" >
	[img]th-image1.jpg[/img]
	[img]th-image2.jpg[/img]
	[img]th-image3.jpg[/img]
	[img]th-image4.jpg[/img]
	[img]th-image5.jpg[/img]
</div>

ora tramite l'evento onload richiamo una funziona che mi inizializza l'array con tutti collegamenti:

codice:

img=document.getElementById("gallery").getElementsByTagName("a");

ora vorrei crearmi un array di immagini, ma non so come fare; poi assegno l'attributo "href" dell'array img, all'attributo "src" di ogni elemento dell'array di immagini.
in questo modo non mi resta che inserire l'elemento dell'array delle immagini dove voglio e il gioco è fatto.
come faccio ad intercettare il click sul collegamento e a farmi sparare la giusta immagine?
so che è possibile fare una cosa del genere: arrayimmagini.item(cont)

nClick=funzione(cont); però questa sintassi mi sembra poco chiara e mi servirebbero ulteriori informazioni a riguardo.
vi ringrazio per il vostro aiuto
Marco

**H5N1_Aviaria** · 29-04-2009, 22:35

L'aray di immagini è presto fatto:

codice:

var imgs=document.getElementById("gallery").getElementsByTagName("img");


for (var i=0;i<imgs.length;i++){
    /* Cosa ci vuoi fare? */
}

ma non mi è chiaro il resto.
O forse vuoi proprio creare degli elementi immagini?

codice:

var imgsLinks=document.getElementById("gallery").getElementsByTagName("a");
var arrayImgs = new Array();
for (var i=0;i<imgs.length;i++){
    var immagine=document.createElement("img");
    immagine.src=imgs[i].href;
    arrayImgs.push(immagine);
}

**marcosonoio** · 29-04-2009, 23:15

grazie della risposta
volevo fare più meno quello, ma ho chiarito le idee e sono arrivato a questo.

codice:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
<!--
var j;
function setup_zoom(){
	images=document.getElementById("gallery").getElementsByTagName("a");
}
function zoomin(i){
	div_image=document.getElementById("image");
	div_image.style.visibility="visible";
	div_image.style.position="absolute";
	div_image.style.top="200px";
	div_image.style.left="200px";
	if(images.length > 1){
		scroll=document.getElementById("scroll_image");
		scroll.style.visibility="visible";
	}
	j=i;
	putimage(i);
}
function zoomout(){
	div_image=document.getElementById("image");
	div_image.style.visibility="hidden";
}
function putimage(i){
	zoommata.src=images.item(i).getAttribute("href");
	div_zoom=document.getElementById("image_zoomed");
	div_zoom.innerHTML=str;
}
function nextback(c){	
	switch(c){
		case 1:
			if(j>0){
				j--;
				putimage(j);
			}
			break;
		case 2:
			if(j<(images.length-1)){
				j++;
				putimage(j);
			}
			break;
	}
}
-->
</script>
</head>
<body onload="setup_zoom()">
	<h1>GALLERIA</h1>
	<div id="gallery">
		[img]th-image1.jpg[/img]
		[img]th-image2.jpg[/img]
		[img]th-image3.jpg[/img]
		[img]th-image4.jpg[/img]
		[img]th-image5.jpg[/img]
	</div>
	



	<div id="image">
		<div id="image_zoomed">[img][/img]</div>
		<div id="scroll_image">[img]r4.gif[/img][img]r2.gif[/img]</div>
	</div>
</body>
</html>

ora non mi resta che fare a meno dell' "onclick" nei tag delle immagini, devo fare una cosa del genere?

codice:

for (i=0;i<images.length;i++){
   images.item(i).onclick = zoomin(i);
}

per evitare che il collegamento mi reindirizzi all'immagine come posso fare?
vorrei seguire questo metodo, in modo che chi visita questa pagina e non ha gli javascript abilitati, possa lo stesso vedere l'immagine ingrandita.
grazie
Marco

**H5N1_Aviaria** · 29-04-2009, 23:31

Procedi con ordine

Normalmente per evitare che il click produca (come ovvia conseguenza) la navigazione si fa ritornare all'evento onlcick false:

codice:

element.onclick=function(){return false;}

Nel tuo caso all'evento onclick assegni la funzione zoomin(i)
Basta modificare tale funzione e come ultima istruzione della stessa aggiungere "return false".
Infine: sì, puoi assegnare le proprietà di onclick come hai detto.

**H5N1_Aviaria** · 29-04-2009, 23:33

Procedi con ordine

Normalmente per evitare che il click produca (come ovvia conseguenza) la navigazione si fa ritornare all'evento onlcick false:

codice:

element.onclick=function(){return false;}

Nel tuo caso all'evento onclick assegni la funzione zoomin(i)
Basta modificare tale funzione e come ultima istruzione della stessa aggiungere "return false".
Infine: sì, puoi assegnare la proprietà onclick come hai detto.

**marcosonoio** · 30-04-2009, 00:04

grazie per la risposta, soprattutto per l'ora.
ho provato come hai detto tu

codice:

images.item(i).onclick=zoomin(i);

e in questo modo, modificando sempre la funzione zoomin(i) con "return false".

codice:

images.item(i).onclick=function(){return zoomin(i);}

in teoria dovrei ottenere lo stesso risultato, ma nel primo caso mi ritrovo subito, appena caricata la pagina, il div già visibile con l'immagine ingrandita, mentre nel secondo caso vengo indirizzato all'indirizzo assoluto del immagine, come se gli javascript non ci fossero.
Marco

**H5N1_Aviaria** · 30-04-2009, 00:09

prova:

codice:

images.item(i).onclick=function(){zoomin(i);return false;}

**marcosonoio** · 30-04-2009, 00:25

ottengo lo stesso risultato del secondo caso.
il ciclo for è stato inserito nella funzione setup_zoom(), giusto no?
Marco

**H5N1_Aviaria** · 30-04-2009, 01:15

Ci sono degli errori che "rompono" il codice.
Innanzitutto evita di usare images come variabile poichè è una parola riservata come forms.
In secondo luogo srt non è definito...
Usa diversi alert per individuare gli errori.

**marcosonoio** · 30-04-2009, 14:03

codice:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
<!--
var j;
function setup_zoom(){
	imgs=document.getElementById("gallery").getElementsByTagName("a");
	for (i=0;i<imgs.length;i++){
		imgs.item(i).onclick=function(){return zoomin(i);};
	}
}
function zoomin(i){
	div_image=document.getElementById("image");
	div_image.style.visibility="visible";
	div_image.style.position="absolute";
	div_image.style.top="200px";
	div_image.style.left="200px";
	if(imgs.length > 1){
		rot=document.getElementById("rotate_image");
		rot.style.visibility="visible";
	}
	j=i;
	putimage(i);
	return false;
}
function zoomout(){
	div_image=document.getElementById("image");
	div_image.style.visibility="hidden";
	rot=document.getElementById("rotate_image");
	rot.style.visibility="hidden";
}
function putimage(i){
	zoommata.src=imgs.item(i).getAttribute("href");
}
function nextback(c){	
	switch(c){
		case 1:
			if(j>0){
				j--;
				putimage(j);
			}
			break;
		case 2:
			if(j<(imgs.length-1)){
				j++;
				putimage(j);
			}
			break;
	}
}
-->
</script>
</head>
<body onload="setup_zoom()">
	<h1>GALLERIA</h1>
	<div id="gallery">
		[img]th-image1.jpg[/img]
		[img]th-image2.jpg[/img]
		[img]th-image3.jpg[/img]
		[img]th-image4.jpg[/img]
		[img]th-image5.jpg[/img]
	</div>
	



	<div id="image">
		<div id="image_zoomed">[img][/img]</div>
		<div id="rotate_image">[img]r4.gif[/img][img]r2.gif[/img]</div>
	</div>
</body>
</html>

questo è il codice corretto, funziona tutto perfettamente apparte il problema del collegamento, te lo hosto da qualche parte così lo vedi?
grazie
Marco

Discussione: array e immagini

Strumenti discussione

Ricerca discussione

Visualizza

array e immagini

Permessi di invio