In questo articolo vedremo come realizzare uno slideshow verticale di prodotti con jQuery aggiungendo un interessante effetto di easing tramite il plugin jQuery Easing.
Partiamo da questa struttura HTML:
<div id="products">
<div id="products-wrapper">
<div id="products-container">
<img src="1.jpg" alt=""/>
<img src="2.jpg" alt=""/>
<img src="3.jpg" alt="" />
<img src="4.jpg" alt=""/>
</div>
</div>
<div id="thumb-nav">
<a href="#" data-rel="0"><img src="1-thumb.jpg" alt=""/></a>
<a href="#" data-rel="1"><img src="2-thumb.jpg" alt=""/></a>
<a href="#" data-rel="2"><img src="3-thumb.jpg" alt=""/></a>
<a href="#" data-rel="3"><img src="4-thumb.jpg" alt=""/></a>
</div>
</div>
Ogni thumbnail della navigazione è collegata all'immagine corrispondente tramite l'attributo data-rel il cui valore corrisponde alla posizione dell'immagine nel set jQuery.
Gli stili CSS sono alquanto semplici:
#products {
width: 100%;
margin: 2em auto;
max-width: 600px;
}
#products-wrapper {
height: 200px;
overflow: hidden;
margin: 0 auto;
width: 400px;
position: relative;
}
#products-container {
position: relative;
}
#products-wrapper img {
display: block;
margin: 0 auto;
position: relative;
}
#thumb-nav {
height: 100px;
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: 1.5em;
background: #eee;
}
#thumb-nav img {
display: inline-block;
margin-right: 0.5em;
}
L'altezza del contenitore delle immagini verrà impostato tramite jQuery. Abbiamo fatto in modo che solo un'immagine alla volta sia visibile impostando l'altezza del contenitore esterno sul valore dell'altezza delle immagini e usando la proprietà overflow. jQuery farà semplicemente scorrere il contenitore interno in verticale mostrando l'immagine corrente:
var Slideshow = {
setHeight: function() {
var $img = $('img', '#products-wrapper');
var total = 200 * $img.length;
$('#products-container').height(total);
},
slide: function() {
$('a', '#thumb-nav').on('click', function() {
var $a = $(this);
var $image = $('img', '#products-wrapper').eq($a.data('rel'));
$('#products-container').animate({
top: -$image.position().top
}, 500, 'easeOutBounce');
});
},
init: function() {
this.setHeight();
this.slide();
}
};
Slideshow.init();