BlogInauguriamo questa sezione del blog dedicata agli sviluppatori con una galleria immagini in Javascript con effetto pop up (vedi esempio di utilizzo).
Tale galleria risulta molto utile oltre ad essere gradevole nell’aspetto e nell’animazione.
Quello che andremo a fare è integrare il componente Lightbox nella nostra pagina web in modo da inserire una galleria immagini dinamica.
Lightbox è scaricabile gratuitamente presso il sito ufficiale.
Una volta scaricato il pacchetto, estrarlo ed uplodarlo sul proprio spazio web.
Create una pagina HTML nella quale andremo ad inserire la vostra galleria immagini.
Assicuratevi che la pagina HTML creata contenga il seguente DOC TYPE xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Nell’intestazione della vostra pagina HTML inserite le seguenti righe di codice che richiamano il componente Lightbox:
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder"
type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
Assicuratevi che i percorsi puntino alla giusta posizione sul server.
A questo punto andremo a creare le miniature delle immagini che compongono la galleria.
Inserire le miniature nel codice della pagina HTML in questo modo:
<a title="titolo della foto" href="percorso immagine zoom"
rel="lightbox[nome set]"><img src="percorso immagine miniatura" alt="" /></a>
Ad esempio supponiamo che le nostre foto eminiature stiano rispettivamente nella cartella /foto e /thumbnail, e si chiamino foto1.jpg, foto2.jpg, foto3.jpg.
Tramite un ciclo (nell’esempio useremo il php per effettuare il ciclo) andiamo a scrivere le miniature componendo la galleria immagini:
<?php
//array dei nomi e dei titoli delle foto
$nomi_foto = array("foto1.jpg","foto2.jpg","foto3.jpg","foto4.jpg","foto5.jpg");
$titoli_foto = array("Titolo della foto 1","Titolo della foto 2","Titolo della foto 3","Titolo della foto 4","Titolo della foto 5");
//ciclo sulla lunghezza dell'array
for($i=0;$i<count($nomi_foto);$i++)
{
echo '<div><a title="' . $titoli_foto[$i] . '" href="foto/'. $nomi_foto[$i] . '" rel="lightbox[mygallery]">';
echo '<img src="thumbnail/' . $nomi_foto[$i] . '" alt="" />';
echo '</a></div>';
}
?>
Aprite la pagina HTML con il vostro browser e cliccate sulle miniature delle immagini per attivare lo zoom.
Grandissimo!! Avevo già scaricato lightbox ma essendo alle primissime armi non ero riuscito a farlo funzionare. Con questa guida è stato molto più semplice complimenti!
Posta un po’ il codice che hai utilizzato e cerchiamo di capire dov’è il problema…
Ho cercato di mettere il codice della galleria immagini nel mio sito ma non si vede e se mi potreste aiutare a inserirlo , perchè questa galleria è proprio bella!!!
grazie