Adesso creeremo un carosello di immagini scrollabili
Prima di tutto scriviamo un po' di HTML:
<div id="featured-books">
<div class="covers">
<a href="../covers/medium/1847190871.jpg" title="Community Server Quickly">
<img src="../covers/medium/1847190871.jpg" width="120" height="148" alt="Community Server Quickly" />
<span class="price">$35.99</span>
</a>
<a href="../covers/medium/1847190901.jpg" title="Deep Inside osCommerce: The Cookbook">
<img src="../covers/medium/1847190901.jpg" width="120" height="148" alt="Deep Inside osCommerce: The Cookbook" />
<span class="price">$44.99</span>
</a>
<a href="../covers/medium/1847190979.jpg" title="Learn OpenOffice.org Spreadsheet Macro Programming: OOoBasic and Calc automation">
<img src="../covers/medium/1847190979.jpg" width="120" height="148" alt="Learn OpenOffice.org Spreadsheet Macro Programming:
OOoBasic and Calc automation" />
<span class="price">$35.99</span>
</a>
<a href="../covers/medium/1847190987.jpg" title="Microsoft AJAX C# Essentials: Building Responsive ASP.NET 2.0 Applications">
<img src="../covers/medium/1847190987.jpg" width="120" height="148"
alt="Microsoft AJAX C# Essentials: Building Responsive ASP.NET 2.0 Applications" />
<span class="price">$31.99</span>
</a>
<a href="../covers/medium/1847191002.jpg" title="Google Web Toolkit GWT Java AJAX Programming">
<img src="../covers/medium/1847191002.jpg" width="120" height="148" alt="Google Web Toolkit GWT Java AJAX Programming" />
<span class="price">$40.49</span>
</a>
<a href="../covers/medium/1847192386.jpg" title="Building Websites with Joomla! 1.5 Beta 1">
<img src="../covers/medium/1847192386.jpg" width="120" height="148" alt="Building Websites with Joomla! 1.5 Beta 1" />
<span class="price">$40.49</span>
</a>
</div>
</div>
Vogliamo avere uno scroll che mostri sempre tre soli risultati. Prima facciamone una versione funzionante con solo CSS:
CSS code:
#featured-books {
position: relative;
background: #ddd;
width: 440px;
height: 186px;
overflow: scroll;
margin: 1em auto;
padding: 0;
text-align: center;
z-index: 2;
}
#featured-books .covers {
position: relative;
width: 840px;
z-index: 1;
}
#featured-books a {
float: left;
margin: 10px;
height: 146px;
}
#featured-books .price {
display: none;
}
Abbiamo dato una grandezza fissa al contenitore #featured-books ed una proprietà overflow: scroll;, che scrolla l'eccedenza del contenuto in orizzontale
Ed ecoo il nostro widget: Image carousel step 1
Facciamo tutto più bello con javascript. Prima di tutto eliminiamo la scrollbar
Javascript code:
$(document).ready(function() {
var spacing = 140;
$('#featured-books').css({
'width': spacing * 3,
'height': '166px',
'overflow': 'hidden'
}).find('.covers a').css({
'float': 'none',
'position': 'absolute',
'left': 1000
});
var $covers = $('#featured-books .covers a');
$covers.eq(0).css('left', 0);
$covers.eq(1).css('left', spacing);
$covers.eq(2).css('left', spacing * 2);
});
Quindi:
var spacing = 140;Stabilisco uno spazio di 140 che sarà la misura di riferimento per ogni immagine compreso il padding laterale
$('#featured-books').css({
'width': spacing * 3,
'height': '166px',
'overflow': 'hidden'
})Calcolo la larghezza del contenitore, e setto 'overflow': 'hidden' (elimino la scrollbar)
.find('.covers a').css({
'float': 'none',
'position': 'absolute',
'left': 1000
});Cerco tutti i link che contengono le immagini e li posiziono absolute fuori del container
var $covers = $('#featured-books .covers a');
$covers.eq(0).css('left', 0);
$covers.eq(1).css('left', spacing);
$covers.eq(2).css('left', spacing * 2);
Prendo i primi tre e li sistemo nella vista
Ed ecoo il nostro widget: Image carousel step 2
Adesso dobbiamo farle muovere. Per ora cliccheremo sull'immagine di destra o di sinistra per visualizzare l'immagine successiva
Javascript code:
$(document).ready(function() {
var spacing = 140;
$('#featured-books').css({
'width': spacing * 3,
'height': '166px',
'overflow': 'hidden'
}).find('.covers a').css({
'float': 'none',
'position': 'absolute',
'left': 1000
});
var setUpCovers = function() {
var $covers = $('#featured-books .covers a');
$covers.unbind('click');
// Left image; scroll right (to view images on left) when clicked.
$covers.eq(0).css('left', 0).click(function(event) {
$covers.eq(2).css('left', 1000);
$covers.eq($covers.length - 1).prependTo('#featured-books .covers');
setUpCovers();
event.preventDefault();
});
// Right image; scroll left (to view images on right) when clicked.
$covers.eq(2).css('left', spacing * 2).click(function(event) {
$covers.eq(0).css('left', 1000);
$covers.eq(0).appendTo('#featured-books .covers');
setUpCovers();
event.preventDefault();
});
// Center image.
$covers.eq(1).css('left', spacing);
};
setUpCovers();
});
Analizziamo il codice:
var setUpCovers = function() {Mettiamo tutto in una funzione
$covers.eq(0).css('left', 0).click(function(event) {
$covers.eq(2).css('left', 1000);
$covers.eq($covers.length - 1).prependTo('#featured-books .covers');
setUpCovers();
event.preventDefault();
});Quando l'utente clicca sull'mmagine di sinistra: sposto l'immagine di destra fuori dal contenitore, prendo l'ultima immagine e la metto come prima (quindi la prima a sinistra); richiamo setUpCovers(); che risistema le prime 3 immagini nella giusta posizione; event.preventDefault(); Serve a fare in modo che quando clicco il link non mi porti a destinazione
$covers.eq(2).css('left', spacing * 2).click(function(event) {
$covers.eq(0).css('left', 1000);
$covers.eq(0).appendTo('#featured-books .covers');
setUpCovers();
event.preventDefault();
});Il procedimento inverso al precedente per l'immagine di destra
$covers.unbind('click');Importante: tolgo tutti i gestori d'evento precedentemente assegnati
Ed ecco il nostro widget: Image carousel step 3
Aggiungiamoci un effetto di slide
Javascript code:
$(document).ready(function() {
var spacing = 140;
$('#featured-books').css({
'width': spacing * 3,
'height': '166px',
'overflow': 'hidden'
}).find('.covers a').css({
'float': 'none',
'position': 'absolute',
'left': 1000
});
var setUpCovers = function() {
var $covers = $('#featured-books .covers a');
$covers.unbind('click');
// Left image; scroll right (to view images on left) when clicked.
$covers.eq(0).css('left', 0).click(function(event) {
$covers.eq(0).animate({'left': spacing}, 'fast');
$covers.eq(1).animate({'left': spacing * 2}, 'fast');
$covers.eq(2).animate({'left': spacing * 3}, 'fast');
$covers.eq($covers.length - 1).css('left', -spacing).animate({
'left': 0}, 'fast', function() {
$(this).prependTo('#featured-books .covers');
setUpCovers();
});
event.preventDefault();
});
// Right image; scroll left (to view images on right) when clicked.
$covers.eq(2).css('left', spacing * 2).click(function(event) {
$covers.eq(0).animate({'left': -spacing}, 'fast', function() {
$(this).appendTo('#featured-books .covers');
setUpCovers();
});
$covers.eq(1).animate({'left': 0}, 'fast');
$covers.eq(2).animate({'left': spacing}, 'fast');
$covers.eq(3).css('left', spacing * 3).animate({
'left': spacing * 2}, 'fast');
event.preventDefault();
});
// Center image.
$covers.eq(1).css('left', spacing);
};
setUpCovers();
});
Ed ecco il nostro widget: Image carousel step 4
Adesso creiamo una thickbox personalizzata. Quando cliccheremo sull'immagine centrale visualizzeremo l'immagine in grande formato e prevederemo che cliccandoci sopra questa vada in fadeOut:
Javascript code:
$(document).ready(function() {
var spacing = 140;
var $enlargedCover = $('<img/>')
.addClass('enlarged')
.hide()
.appendTo('body');
[...]
CSS code:
img.enlarged {
position: absolute;
z-index: 5;
cursor: pointer;
}
Dopo aver creato un elemento nascosto img:
Javascript code:
$covers.eq(1).css('left', spacing).click(function(event) {
$enlargedCover.attr('src', $(this).attr('href')).css({
'left': ($('body').width() - 360) / 2,
'top' : 100,
'width': 360,
'height': 444
}).show().one('click', function() {
$enlargedCover.fadeOut();
});
event.preventDefault();
})
[...]
Analizziamo il codice:
$covers.eq(1).css('left', spacing).click(function(event) {Quando premo l'immagine centrale
$enlargedCover.attr('src', $(this).attr('href')).css({
'left': ($('body').width() - 360) / 2,
'top' : 100,
'width': 360,
'height': 444
}).show()Pozsiziono l'immagine grande
.one('click', function() {
$enlargedCover.fadeOut();
});Assegno il click. Da notare l'uso di un nuovo metodo .one() che consente di assegnare un click ad un elemento in modo che sia rimosso dopo la prima volta, è utile in casi come questi
Ed ecco il nostro widget: Image carousel step 5