Visita <a href="http://www.liquida.it/" title="Notizie e opinioni dai blog italiani su Liquida">Liquida</a> e <a href="I widget di Liquida per il tuo blog">Widget</a>

Tutorial jQuery – Gallery di Foto Originale

Scritto da fedeweb il 14 marzo 2011 con 5 Commenti | Pubblicato in Tutorial Jquery


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.

Tutorial jQuery - Gallery Fotografica Originale

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

    Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

    343 download

    566 download

    About fedeweb

    Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

    5 Commenti

    1. Grazie Fede..

    2. 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

    3. 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.

    4. 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

      • Ciao Massimo, prova a mandarmi per email il codice.

    Lascia un commento