PDA

Visualizza la versione completa : foto gallery con collegamento tra thumbs e immagine


websky
04-11-2010, 12:51
ciao a tutti
nel mio sito di fotografia ho creato delle gallerie con javascript (e php, perché carico da casa immagini sul server quindi interagiscono le due tecnologie) in modo che posso scorrere con una classica galleria le foto
vedete qua
http://www.paolobergomi.it/sitofoto/gallerybn.php

ora mi manca una cosa: vorrei rendere le thumbs sulla sx attive nel senso che se clicco una thumb mi cambiar anche la corrispondente immagine nella galleria
per ora invece mi sono accontentato di fare aprire l'immagine grande cliccando la thumb, ma non cambia l'immagine corrispondente nella galleria ascorrimento

vi posto il codice della pagina



$nesql = "SELECT id_foto, descrizione FROM (SELECT id_foto, descrizione FROM bn ORDER BY id_foto DESC) a LIMIT 1";
$nentry = mysql_query ($nesql);

$new = mysql_fetch_row ($nentry);

$nesql2 = "SELECT id_foto, descrizione FROM (SELECT id_foto, descrizione FROM bn ORDER BY id_foto) a LIMIT 1";
$nentry2 = mysql_query ($nesql2);

$new2 = mysql_fetch_row ($nentry2);

$sql = "SELECT * FROM bn ORDER BY descrizione";
$result = mysql_query ($sql);

while ($row = mysql_fetch_row($result))
{
if ( $item == 0 ) { $_primafoto = $row[0]; }
if ( $item == 0 ) { $_primolink = ".".jpg']Ingrandisci l'immagine / Zoom Image ('http://www.paolobergomi.it/sitofoto/bnGrande/".$row[0)";}
if ( $item == 0 ) { $_firstext = $row[1]; }
echo "photos[".$item."]=\"bn/".$row[0].".jpg\";";
echo "text[".$item."]=\"".$row[1]."\";";
echo "link[".$item."]=\".".jpg']Ingrandisci l'immagine / Zoom Image ('http://www.paolobergomi.it/sitofoto/bnGrande/".$row[0)\";";
$item=$item+1;
}
}
?>





javascript


function arrow()
{

document.getElementById( "back2" ).style.display = "none";

}

function changePic(dir) {
var testo = document.getElementById( 'testo' );
var collegamento = document.getElementById( 'collegamento' );
var image = document.images.photoslider,
fwdBtn = document.getElementById('forward2'),
backBtn = document.getElementById('back2'),
n = photos.length-1;
if (dir == "next") {
which = (which < n) ? which + 1 : which;
image.src = photos[which];
testo.innerHTML = text[ which ];
collegamento.innerHTML = link[ which ];
backBtn.style.display = "inline";
if (which == n) {
fwdBtn.style.display = "none";
}
} else if (dir == "back") {
which = (which > 0) ? which - 1 : which;
image.src = photos[which];
testo.innerHTML = text[ which ];
collegamento.innerHTML = link[ which ];
fwdBtn.style.display = "inline";
if (which === 0) {
backBtn.style.display = "none";
}

}
return false;
}


html


<div id='iconesx' name="thumbs">
<?php
$sql = "SELECT * FROM bn ORDER BY descrizione";
$result = mysql_query ($sql);

while ($row = mysql_fetch_row($result))
{
echo "<img src=\"bnthumbs/".$row[0].".jpg\">";
$item=$item+1;
}


nell'ultima parte nelle' HTML hdove c'è img src e stamp i thumb vorrei creare un evento onclick che appena clicco su una thumb mi si apre ilc orrispondente immagine creata dall'array in php
Purtroppo non riescoa venirne fuori :bhò:
qualche idea?
grazie ciao :ciauz:

Loading