Una gallery animata con jquery e css

Postato da admin in jquery, Tutorial on 11 28th, 2008 | 3 responses

Realizzare foto-gallery animate, con effetti come scorrimento, slide, etc, erano principalmente una prerogativa di flash, con tutte le conseguenze che ne derivano( non mene vogliano gli amanti di flash), cioè pesantezza, poche possibilità di indicizzazione etc.etc.

Senza per questo togliere nulla a Flash, con il quale si possono realizzare cose veramente carine, ma per esempio nel caso si voglia realizzare una gallery semplice allora flash puo essere la soluzione meno adatta, come fare in questo caso?

la risposta si chiama Jquery, si mi sto letteralmente innamorando di questo framework per la sua semplicità e soprattutto per i tanti comodi plugin che si trovano sparsi per la rete.

Ed e proprio grazie a uno di questi plugin che e possibile realizzare una bellissima gallery con effetto slide senza usare flash e con veramente pochissime linee di codice.

L’idea mi è venuta lavorando su un sito in cui avevo bisogno solo di creare un piccolo slide nella home page, allora cercando su internet ho trovato il plugin che fa per me, jCarouselLite.

Vediamo subito come funziona con un esempio pratico.

Inanzitutto bisogna scaricarsi il plugin e jquery e subito dopo incuderli nella pagina con il tag script:

<script type=”text/javascript” src=”jcarousellite_1.0.1.js”></script>

<script type=”text/javascript” src=”jquery.js”></script>

Dopo creare il div che contiene le immagini come in questo codice di esempio:
<div class=”auto”>
<div class=”home-gallery”>
<ul>
 

  <li><img src=”slider/photo_slider2.jpg” alt=”delta godreem” /></li>
        <li><img src=”slider/photo_slider1.jpg” alt=”ultraviolet” /></li>
        <li><img src=”slider/photo_slider4.jpg” alt=”resident evil” /></li>
        <li><img src=”slider/photo_slider3.jpg” alt=”kill bill” /></li>
        <li><img src=”slider/photo_slider5.jpg” alt=”anouk” /></li>

 

</ul>
</div>
</div>

Possiamo personalizzare la nostra gallery infine con un css che imposta la classe home-gallery( questa classe è importante per il plugin). Codice css


div.home-gallery{
border: 1px solid #ccc;
width: 400px;
float: left;
margin-left: 30px;
}
.home-gallery ul{
list-style: none;
}
.home-gallery ul li{

float: left;
}
.home-gallery img{
width: 100px;
height: 100px;
margin: 10px;
padding: 5px;
border: 2px solid #EEE;
}

Infine includiamo il codice javascript :

 

$(document).ready(function() {

   $(“.home-gallery”).jCarouselLite({

    visible: 4,

auto: 800,

    speed: 1000

});

});

 

la funzione document ready è quella che dice allo script di avviarsi una volta caricata tutta la pagina nel dom, attraverso $() prendiamo l’elemento con classe home-gallery, io in questo caso ho messo le immagini all’interno di una lista, le ho modificate con il css e infine ho applicato le proprieta del plugin jCarouselLite.
visibile: indica quante immagini devono essere visibili nello slide
auto : indica se lo scorrimento avverra in automatico
speed: indica la velocita in millisecondi, dello slide.
Ci sono anche altre funzioni comodissime supportate da questo plugin, che potete vedere nella pagina di documentazione. Il bello è che con pochissime righe di codice possiamo realizzare una gallery animata senza usare flash e potendola gestire a nostro piacimento modificando i parametri.
Insomma un plugin ottimo, e un framework, jquery, che semplifica di moolto il lavoro del programmatore in javascript.
Ho creato un esempio completo che potete visualizzare a questo indirizzo:
mentre il file zippato completo è scaricabile qua :
Hasta Luego!

Potrebbero interessarti anche :

Ti è piaciuto l'articolo? Abbonati ai Feed Rss per tenerti sempre aggiornato

3 commenti »

  1. cirio Dice:

    mm, plugin da provare;)

    comment-bottom
  2. Giuggiola Dice:

    Ciao,
    cè un modo per non far effettuare la pausa ad ogni foto, cioè lasciare lo scorrimento fluido?
    Grazie

    comment-bottom
  3. admin Dice:

    In che senso fluido?

    il parametro auto fa scorrere in automatico le foto, dai un occhiata alla documentazione, ho messo il link. I spiega i vari parametri che si possono applicare al plugin.
    :)

    comment-bottom

Trackbacks

  1. diggita.it Dice:

    tutorial per realizzare una gallery animata con jquery e css…

    vediamo come realizzare una gallery animata con jquery e css.
    per realizzarla usero un plugin sviluppato per jquery e che permette con poche righe di codice di realizzare la nostra gallery e gestirla a nostro piacimento….

    comment-bottom

  2. [...] aver parlato del plugin CarouselLite per creare fotogallery con jquery, questa volta realizzeremo uno slideshow con effetto a scomparsa con un altro fantastico plugin [...]

    comment-bottom

  3. [...] gallery animata con jquery e css Fonte: Antonio Fullone- Risorse per il Web design Una gallery animata con jquery e css Realizzare foto-gallery animate, con effetti come scorrimento, [...]

    comment-bottom

RSS feed dei commenti a questo articolo. TrackBack URL

Lascia un commento