Uno slideshow ancora con jquery
Dopo aver parlato del plugin CarouselLite per creare fotogallery con jquery, questa volta realizzeremo uno slideshow con effetto a scomparsa con un altro fantastico plugin per Jquery, cycle plugin.
A differenza del Carousel questo plugin ha molte più opzioni e si possono creare effetti veramente carini.
Con questo tutorial vedremo come realizzare un effetto zoom sulle nostre foto, mentre alla fine dell’articolo c’è il ink alla pagina completa con una serie di effetti realizzati con questo plugin.
la prima cosa da fare è sempre quella di scaricare il plugin, a questo indirizzo, e successivamente, se ancora non lo avete fatto, scaricare jquery.
Quindi li linkiamo al nostro file con il tag script :
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.cycle.all.js”></script>
Quindi passiamo a scrivere il css per le nostre foto.
Per una migliore resa dello script conviene dare delle dimensioni fisse al box contenitore, per evitare problemi di visualizzazione degli effetti.
body{
font-family:arial;
font-size:13px;
}
h3{
color:#333;
padding:10px;
background: #f7f7f7;
border:1px solid #ccc;
width:110px;
}
#wrapper{
margin:auto;
width:800px;
}
.container{
float:left;
margin-left: 100px;
width:120px;height:130px;
}
.images{
margin-bottom:50px;
width:120px; height:130px;
}
.images img{
padding:15px;
background:#f7f7f7;
border:1px solid #333;
}
Quindi passiamo alla realizzazione del nostro script:
$(document).ready(function(){
$(‘#gallery’).cycle({
fx: ‘fadeZoom’,
speed: 1000,
});
});
in questo caso imposto un effetto fadeZoom su div con id unico gallery, una velocità di 1000 secondi.
Infine il codice html
<div id=”wrapper”>
<div class=”container”>
<h3>Effetto Zoom</h3>
<div id=”zoom” class=”images”>
<img src=”gallery/1.jpg” alt=”delta Godreem” />
<img src=”gallery/2.jpg” alt=”Ultraviolet” />
<img src=”gallery/3.jpg” alt=”resident evil” />
<img src=”gallery/4.jpg” alt=”kill bill” />
<img src=”gallery/5.jpg” alt=”anouk” />
</div>
</div>
Come vedete è semplicissimo da usare, potete consultare la pagina di documentazione, con molti effetti sia per beginners, che effetti più complicati.
La lista degli effetti disponibili è visibile a questa pagina.
Oppure potete scaricare direttamente il file zippato per studiare il codice.
Hasta Luego!
(3 votes, average: 5,00 out of 5)
Loading ...
Popularity: 81% [?]
Potrebbero interessarti anche :
+'&title='+encodeURIComponent(document.title)+'&overview='+encodeURIComponent(document.title)+'&urllanguage=en&urlaffiliate=32003&encoding=UTF-8&urlpicture=http://www.viadeo.com/v_img/shareit/viadeoflower.gif')
2 commenti
Trackbacks
-
gallery con jquery…
Dopo aver parlato del plugin CarouselLite per creare fotogallery con jquery, questa volta realizzeremo uno slideshow con effetto a scomparsa con un altro fantastico plugin per Jquery, cycle plugin.
A differenza del Carousel questo plugin ha molte più…
RSS feed dei commenti a questo articolo.
Al momento l'inserimento di commenti non è consentito.
Il titolo dell’articolo contiene un errore grammaticale: di solito si dice la slideshow dunque è “Una slideshw…”.
Comunque ottimo articolo :-!
Ops,! grazie per la segnalazione
