Per ottenere l'effetto di uno slideshow a fisarmonica con jQuery la soluzione più semplice è quella di utilizzare i valori delle tabelle (table e table-cell) CSS, anche se questi non sono supportati da Internet Explorer 7 ed inferiori. Ma poichè noi non possiamo sempre essere costretti a scendere a patti con browser che non rispettano gli standard, in questo esempio useremo tali valori, anche perchè le versioni inferiori di Explorer visualizzeranno semplicemente dei blocchi. Vediamo l'implementazione.
La marcatura è elementare:
<div id="slideshow">
<div class="slide">
<p>...</p>
</div>
<!-- altre slide -->
</div>
Il CSS usa appunto i valori delle tabelle citati poc'anzi:
#slideshow {
width: 800px;
height: 400px;
margin: 0 auto;
background: #000;
color: #fff;
border: 1em solid silver;
display: table;
border-collapse: collapse;
}
div.slide {
width: 199px;
height: 400px;
border-left: 1px solid silver;
cursor: pointer;
display: table-cell;
}
div.slide p {
display: none;
margin: 0;
padding: 1em;
}
Con jQuery abbiamo bisogno di tre valori per definire la larghezza delle slide durante l'animazione:
- 400: slide espansa
- 131: larghezza delle altre slide quando la slide corrente si espande
- 199: larghezza predefinita delle slide
Operiamo con il gestore di eventi hover su ciascuna slide, espandendola e mostrando il testo al suo interno e in seguito ridimensionandola e nascondendo nuovamente il testo:
$(function() {
var fullWidth = 400;
var resizedWidth = 131;
var defaultWidth = 199;
var slides = $('div.slide', '#slideshow');
slides.each(function() {
var slide = $(this);
var $p = $('p', slide);
slide.hover(function() {
slide.stop(true, true).animate({
width: fullWidth
}, 'slow', function() {
$p.fadeIn('slow');
});
slides.not(slide).css('width', resizedWidth);
}, function() {
slide.stop(true, true).animate({
width: defaultWidth
}, 'slow', function() {
$p.fadeOut('slow');
});
slides.not(slide).css('width', defaultWidth);
});
});
});
Potete visionare l'esempio finale in questa pagina.