In questo articolo vogliamo mostrare come integrare nelle proprie pagine uno slide show automatico relizzato con jQuery e PHP.
Per vedere il risultato che otteremo possiamo visualizzare la pagina della demo
Per prima cosa dobbiamo procurarci jQuery e caricarlo sulla pagina dello slide show, se vogliamo fare rapidamente possiamo copiare e incollare questo codice all’interno del tag head della nostra pagina:
Fatto questo scarichiamo il file compresso che contiene il foglio di stile, il codice jQuery e il php da includere/incollare nella propria pagina. Sembra ovvio ma affinchè questa galleria funzioni il vostro server deve supportare il php.
Nel file compresso ci sono tre file e una cartella:
- div.fotoBox.php
- slideS.css
- slideS.js
- gallery (cartella vuota)
La presenza della cartella vuota è solo un promemoria ed è utile anche per avere un’idea della posizione di come devono essere posizionati i file sul server.
Il primo file è il codice php da inculudere o da copiare nella pagina dello slide show:
;?>)
Il codcie php non fa altro che prendere tutte le immagini con estensione jpg presenti nella sottocartella gallery e produrre il codice HTML necessario per la loro visualizzazione.
Agendo sulla funzione glob() possiamo cambiare la cartella da cui prendere i file o l’estensione degli stessi. In ogni caso infilando i file jpg nella cartella gallery funziona tutto!
Il secondo file presente è il CSS, che va collegato alla pagina che conterrà la galleria:
img.slide{
display:none;
border:0;
height:384px; /*altezza immagine */
width:512px; /*larghezza immagine */
position:absolute;
top:0;
left:0;
margin:20px auto;
}
#fotoBox{
position:relative;
height:434px; /*altezza box dove appariranno le immagini*/
}
In questo css si suppone che le immagini abbiano dimensione 384 X 512 e un margine verticale di 20 px. In base a questo è stata calcolata l’altezza del fotoBox, se modifichiamo le dimensioni delle immagini, dobbiamo ricalcolare l’altezza del fotoBox.
Va notato che le immagini saranno viusalizzate tutte con le stesse dimensioni, questa galleria funziona così.
Il terzo file e il javascript (jQuery):
$(document).ready(function(){
var numPitc=$('img.slide').length;
var actPitch = 0
$(window).load(function () {
SlideShow(numPitc,actPitch);
});
});
function SlideShow(num,act){
if (num<=act) {act=0;$('img.slide').slice(-1).fadeOut('slow')}
$('img.slide').slice(act-1,act).fadeOut('slow')
$('img.slide').slice(act,act+1).fadeIn('slow')
act++;
setTimeout("SlideShow("+num+","+act+")",2000) //modificabile
}
Qui non c'è necessità di modificare nulla, l'unica cosa è la pausa tra una foto e l'altra che è rappresentata dal 2000, che sta ad indicare 2000 millisecondi, cioè 2 secondi, più aumentate il valore più la pausa è lunga, più il valore è basso più la pausa è breve.