Slideshow jQuery e coordinate delle slide

Spesso ci chiediamo cosa ci sia alla base di determinati effetti sugli slideshow jQuery e ci sentiamo intimoriti di fronte a dettagli che ci sfuggono. Ci chiediamo come si fa a realizzare slideshow così. Mi sento di rispondere come spesso risponde Stephen King a chi gli chiede come fa a scrivere i suoi romanzi: un pezzo alla volta. In questo post vedremo come ottenere le coordinate delle slide.

Uno slideshow è composto da più contenitori: il contenitore delle slide ha una larghezza effettiva molto maggiore di quella del contenitore più esterno, ma solo una parte è visibile grazie alla dichiarazione CSS overflow: hidden specificata sul contenitore più esterno.

Il contenitore delle slide ha quasi sempre la dichiarazione position: relative perchè è questo elemento che scorre in orizzontale o verticale grazie a jQuery. Questa dichiarazione crea un posizionamento contestuale tra il contenitore e le slide.

Tale posizionamento ci permette di utilizzare il metodo position() ed accedere alle sue proprietà  top (se lo slideshow è verticale) e left (se lo slideshow è orizzontale) su ciascuna slide.

Questi valori aumentano da sinistra a destra (slideshow orizzontale) e dall'alto verso il basso (slideshow verticale). Quindi per mostrare le slide più avanzate dobbiamo sempre usare valori negativi per riportare la slide corrente in vista.

Possiamo creare un array di tutti questi valori con una semplice funzione. Per esempio, in uno slideshow orizzontale scriveremo:

function getSlidePositions() {
    var positions = [];
    $('div.slide').each(function(i) {
       var left = $(this).position().left;
       positions[i] = left;
    });
    return positions;
}

Possiamo usare questo array con un indice incrementale usato in un timer ciclico:

var autoSlide = function() {
    var leftOffsets = getSlidePositions();
    var index = 0;
    var timer = setInterval(function() {
        index++;
        if(index == leftOffsets.length) {
           index = 0;
        }
        $('#slide-wrapper').animate({
            left: - leftOffsets[index]
         }, 1000);
    }, 1000);
};

Potete anche utilizzare setTimeout() per creare lo stesso timer senza aspettare un solo intervallo:

var timer = setTimeout(function() {
    // stesso codice di sopra
    setTimeout(arguments.callee, 1000);
}, 50);

Se invece non vogliamo creare automatismi, dobbiamo associare a ciascuna slide la sua posizione. Possiamo farlo con il metodo data() o con un attributo:

$('div.slide').each(function() {
    var left = $(this).position().left;
    $(this).data('pos', left);
    // oppure: $(this).attr('rel', left);
});

Quindi possiamo usare la stessa tecnica dell'indice incrementale combinato con il metodo eq() per accedere alla slide corrente e leggere la sua posizione, per esempio associando questa azione ai bottoni Avanti/Indietro dello slideshow.