Dopo tanto tempo ecco che torna l’appuntamento con i tutorial jQuery. Oggi vediamo in particolare come costruire una gallery di foto, utilizzando Mobile Select e il plugin jquery lightbox.
Vediamo quali sono i passi per ottenere il risultato visto nell’esempio.
Passo 1. Inizializzazione
Come al solito il primo passo è quello di inserire tra i tag head le righe di codice necessarie per richiamare gli script e i fogli di stile.
link href="css/default.css" rel="stylesheet" type="text/css" />Passo 2. Codice HTML Il codice HTML è identico a quello presente nella pagina del plugin di Mobi Select, con la sola aggiunta del collegamento all'immagine grande.



Passo 3. Applichiamo Lightbox alle foto
Infine applichiamo il plugin Lightbox agli elementi con la class="eiffel" e class="notre-dame", separatamente.
Per qualunque chiarimento scrivimi pure nei commenti
Scarica il sorgente
Guarda il tutorial










14 marzo 2011 at 11:50
Grazie Fede..
21 marzo 2011 at 19:36
Ottimo tutorial.
Mi chiedevo però se esistesse un modo per non elencare i nomi dei file, ma di indirizzarli direttamente al contenuto delle cartelle, cosi da poter aggiungere di tanto in tanto semplicemente delle foto senza modificare la pagina.
Cmq grazie
19 agosto 2012 at 20:45
Salve …
Ho una domanda come posso mettere su le miniature di anteprima di una galleria video un effetto che lo visto su questo foto il simbolo di play.
exempio:http://www.fedeweb.net/wp-content/themes/periodic_v2/images/misc/nav-thumb.jpg.
3 ottobre 2012 at 08:21
Ciao, sto provando ad usare questa gallery ma in fase di esecuzione mi da un errore:
Riga: 55
Errore: L’oggetto non supporta la proprietà o il metodo ‘lightBox’
I files js e css sono tutti caricati, il codice che ho usato è praticamente lo stesso del tutorial…
Se mi date una mano, magari è una stupidaggine…sicuramente.
Grazie1000
Massimo
3 ottobre 2012 at 22:48
Ciao Massimo, prova a mandarmi per email il codice.