galleria di immagini

**carlaccio** · 18-02-2004, 02:16

Ho creato una galleria di immagini usando due frame, uno contiene la pagina con le thumbnails e l'altro - chiamato main - un'immagine (image[0] nel mio caso) che viene sostituita cliccando su 1 thumbnail.

ecco la pagina con le thumbnails che si chiamano come le foto grandi precedute da th_:

<script language="JavaScript" type="text/javascript">
foto = new Array("foto1.jpg","foto2.jpg","foto3.jpg");
numfoto = foto.length;

for (var i=0; i<numfoto; i++)
{document.write("[img]th_" + foto[i] + "[/img]

" );}
</script>

Però quando clicco su una thumbnail ottengo un errore del tipo 'foto1' non è definito

Qualcuno mi può aiutare?

ecco qui la pagina ...se volete vedere qualche foto di Caorle (VE)...

**carlaccio** · 19-02-2004, 03:08

Che sciocco!! Ho provato funzioni di ogni tipo e perso un sacco di tempo a scervellarmi. In realtà quello che mi serviva erano delle semplici virgolette!

Ecco qui la soluzione...

foto = new Array("foto01.jpg","foto02.jpg","foto03.jpg");
numfoto = foto.length;

for (var i=0; i<numfoto; i++)
{document.write("<a href=\"#jscpa\" onClick=\"parent.main.document.images[0].src = '" + foto[i] + "'\"><img src=\"th_" + foto[i] + "\" alt=\"" + foto[i] + "\" border=\"0\" align=\"\"></a>

" );} funziona!!

Mi pare di avere di avere creato una galleria niente male. Se qualcuno vuole dare un'occhiata, ecco il link: galleria

Se qualcuno fosse interessato a questa galleria potete prendere il codice dal sito oppure richiedetemelo!

saluti a tutti

**carlaccio** · 19-02-2004, 03:21

le virgolette fanno un po' fatica a vedersi, vediamo se ora sono più leggibili...

foto = new Array("foto01.jpg","foto02.jpg","foto03.jpg");
numfoto = foto.length;

for (var i=0; i<numfoto; i++)
{document.write("<a href=\"#jscpa\" onClick=\"parent.main.document.images[0].src = ' " + foto[i] + " ' \"><img src=\"th_" + foto[i] + " \" alt=\" " + foto[i] + " \" border=\"0\" align=\"\"></a>

" );}

**carlaccio** · 22-02-2004, 22:44

ciao a tutti!
Ecco la galleria di foto completa!
un frame contiene le thumbnails, l'altro contiene l'immagine visualizzata e dei tasti avanti e indietro per navigare tra le immagini(sotto i tasti avanti e indietro ci sono le thumbnails relative all'immagine successiva e precedente)
inoltre c'è la possibilità di scegliere un'immagine a caso, lo slideshow...

questa pagina contiene i 2 frame:

<frameset cols="*,110" border="0">
<frame name="main" src="main.htm" scrolling="auto" frameborder="0"> <frame name="thumbnails" src="thumbnails.htm" scrolling="auto" frameborder="0">
</frameset>

main.htm - questa pagina contiene le thumbnails:

[B]<html>
<head>
<title>th</title>

<script language="JavaScript1.1" src="foto_arrey.js">
</script>

</head>
<body>

<script language="JavaScript">
/* CJSPA - carlaccio js photo album - carlaccio.too.it */
numfoto = foto.length;
for (var i=0; i<numfoto; i++)
{document.write("<a href=\"#jscpa\" onClick=\"parent.main.document.images['intro'].src = '" + foto[i] + "'\"><img src=\"" + thumb[i] + "\" alt=\"" + foto[i] + "\" border=\"0\" width=\"65\" height=\"48\"></a>

" );}
</script>

</body>
</html> [/B]

thumbnails.htm - questa è la pagina principale dove si vedono le immagini:

<html>

<head>
<title>main</title>

<script language="JavaScript1.1" src="foto_arrey.js"></script>

</head>
<body topmargin="5">

<center>
[img]foto01.jpg[/img]</center>
<center>
<script language="JavaScript1.1">

var which=0

function indietro(){
if (which>0){
window.status='<<indietro'
which--
document.images.intro.src=foto[which]
}
else window.status='Prima immagine'
}
function avanti(){
if (which<foto.length-1){
window.status='avanti>>'
which++
document.images.intro.src=foto[which]
}
else window.status='Fine delle immagini'
}
function corrente(){
document.images.intro.src=foto[which]
window.status='immagine corrente'
}
window.setInterval("imcorrente()",1000);
function imcorrente(){
if(which>0)
document.images.imm1.src=thumb[which-1];
else
document.images.imm1.src="noimg.gif";
if(which>=0)
document.images.imm2.src=thumb[which];
if(which<foto.length-1)
document.images.imm3.src=thumb[which+1];
else
document.images.imm3.src="noimg.gif";
}
function slideshow(){
slid = setInterval("avanti()",4000);}

function ferma()
{clearInterval(slid)}

function acaso()
{var randomimg=Math.floor(Math.random()*foto.length);
document.images[0].src=foto[randomimg];
which=randomimg; }

window.setInterval('questaimg()',700);
function questaimg(){
document.forms[0].nimg.value = "foto " + (which+1) + " di " + foto.length;
}

</script>

<center><table border="0" cellspacing="0"><tr>
<td align="center" valign="top">
<a href="javascript:indietro()"><<indietro
[img]noimg.gif[/img]</a>
</td>
<td align="center" valign="top">
<a href="javascript:corrente()">corrente
[img]noimg.gif[/img]</a>
</td>
<td align="center" valign="top">
<a href="javascript:avanti()">avanti>>
[img]noimg.gif[/img]</a></td></tr></table></center>

<center><form>
slideshow: avvia -
ferma -
riavvolgi -
ultima foto -
foto a caso

<input size=10 name=nimg value="foto">
</form></center>

</center>

</body>
</html>

questo è, invece, il contenuto del file foto_arrey.js che richiamato dalle due pagine thumbnails.htm e main.htm

foto = new Array("foto01.jpg","foto02.jpg","foto03.jpg");
thumb = new Array("th_foto01.jpg","th_foto02.jpg","th_foto03.j pg");

esempio

ciao ciao

**carlaccio** · 22-02-2004, 22:49

Ma...
C'è ancora qualcosa che non va! Quando clicco su una thumbnail l'immagine compare sulla pagina principale, ma non trovo il modo di modificare la variabile which. Quindi i tasti avanti e indietro(e relative thumbnails) non si riferiscono più all'immagine visualizzata.
C'è il modo di modificare la variabile which presente nel file main.htm, cliccando su una thumbnail presente nel file thumbnails.htm? C'è un altra soluzione? Qualcuno può aiutarmi?
grazie, saluti

**Xinod** · 23-02-2004, 04:08

infatti, passa which, forse occorre richiamare anche la funzione che mostra l' immagine ingrandita (corrente()?), prova

codice:

for (var i=0; i<numfoto; i++) 
{document.write("<a href=\"#jscpa\" onClick=\"parent.main.which=" + i + ";parent.main.corrente();\"><img src=\"" + thumb[i] + "\" alt=\"" + foto[i] + "\" border=\"0\" width=\"65\" height=\"48\"></a>

" );}

ciao

**carlaccio** · 23-02-2004, 14:05

Grazie mille!!!

Funziona perfettamente!!

la funzione corrente() ora posso eliminarla!

Apre l'immagine visualizzata. Essendo già visualizzata non ha bisogno di essere aperta.
Prima, invece, al clic su una thumbnail c'era una sfasatura tra immagine visualizzata e valore di which a cui si poteva rimediare cliccando sul link che richiamava la funzione corrente().

ciao!

**carlaccio** · 09-04-2004, 11:00

ciao!

Ho creato lo slideshow automatico che fa vedere le immagini in sequenza.
IL codice è questo (vedi sopra)

function slideshow(){
slid = setInterval("avanti()",4000);}

Purtroppo ha un problema: passa all'immagine successiva dopo 4 secondi anche se l'immagine non è stata totalmente caricata.
Come posso risolvere?

ciao ciao

**carlaccio** · 05-12-2004, 16:44

come posso fare?

**carlaccio** · 19-02-2005, 13:06

ciao!

Ho creato lo slideshow automatico che fa vedere le immagini in sequenza.
IL codice è questo (vedi sopra)

function slideshow(){
slid = setInterval("avanti()",4000);}

Purtroppo ha un problema: passa all'immagine successiva dopo 4 secondi anche se l'immagine non è stata totalmente caricata.
Come posso risolvere?

So che ci sono i preload di immagini, ma io non vorrei precaricare tutte le immagini

ciao ciao

Discussione: galleria di immagini

Strumenti discussione

Ricerca discussione

Visualizza

galleria di immagini

photo album

slideshow che attende il caricamento dell'immagine prima di passare alla successiva

Permessi di invio