| EGFadeBox - Slide immagini + lightbox |
EGFadeBox è un piccolo script che permette di inserire in qualsiasi sito una o più slide di immagini, ingrandibili, a rotazione casuale oppure ordinata.Usa jQuery e lightBox.
|
|
| Box a rotazione ordinata |
Box a rotazione casuale |
Lo script è scaricabile gratuitamente da questa pagina.
Installazione. Passo 1 dipendenze.
Per utilizzare lo script è necessario inserire nella pagina di vostro interesse i link ai file di lightbox, jquery (v. 1.4 o superiore) ed EGFadeBox.
Supponendo che ogni file Javascript sia stato inserito nella cartella /js ed ogni foglio stile sia stato inserito nella cartella /css si dovranno inserire nella sezione HEAD della pagina i riferimenti a ...
LIGHTBOX
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
JQUERY
<script src="js/jquery.js" type="text/javascript"></script>
EGFADEBOX
<script src="js/egFadeBox_data.js" type="text/javascript"></script>
<script src="js/egFadeBox_lib.js" type="text/javascript"></script>
<link href="css/egFadeBox.css" rel="stylesheet" type="text/css" />
Inoltre dovranno essere inseriti nella cartella images tutte le immagini utilizzate da LightBox (avanti, indietro, chiudi, ...)
Installazione. Passo 2 configurazione script.
La configurazione di base dello script viene fatta modificando il file "egFadeBox_data.js" con il vostro editor (gEdid, blocco note, Dreamweaver, ...)
In questo file è possibile configurare l'array immagini utilizzato di default ed alcune variabili generiche.
EGFadeBox utilizza un array bidimensionale come confenitore per le informazioni relative alle immagini piccole, le immagini grandi e la descrizione dell'immagine da passare a lightbox.
Nell'esempio presente nell'archivio ...
egFadeBoxArr = [
[
"case_paglia_aaran_p.jpg",
"case_paglia_aaran_g.jpg",
"Case di paglia alle Isole Aaran (Irlanda)"
],
[
"cliffs_of_moher_nord_p.jpg",
"cliffs_of_moher_nord_g.jpg",
"Cliffs of Moher (Irlanda)"
],
[
"isole_aaran_doolin_tramonto_p.jpg",
"isole_aaran_doolin_tramonto_g.jpg",
"Isole Aaran viste da Doolin al tramonto (Irlanda)"
],
[
"lago_annecy_notte_p.jpg",
"lago_annecy_notte_g.jpg",
"Il lago di Annecy di notte (Francia)"
],
[
"oceano_atlantico_da_doolin_p.jpg",
"oceano_atlantico_da_doolin_g.jpg",
"l'oceano Atlantico da Doolin (Irlanda)"
]
];
E' possibile scrivere l'array in qualsiasi modo, purchè sia bidimensionale.
Ad esempio
egFadeBoxArr = [
["case_paglia_aaran_p.jpg",
"case_paglia_aaran_g.jpg",
"Case di paglia alle Isole Aaran (Irlanda)"
],
["cliffs_of_moher_nord_p.jpg",
"cliffs_of_moher_nord_g.jpg",
"Cliffs of Moher (Irlanda)"
],
... ... ...
];
oppure
egFadeBoxArr[0][0] = "case_paglia_aaran_p.jpg";
egFadeBoxArr[0][1] = "case_paglia_aaran_g.jpg";
egFadeBoxArr[0][2]= "Case di paglia alle Isole Aaran (Irlanda)";
... ... ...
E' inoltre possibile ignorare l'array presente nel file "egFadeBox_data.js" ed usarne altre già presenti nel sito o su file separati, purchè siano bidimensionali e rispettino l'ordine richiesto dallo script (miniatura, ingrandimento, alt title)
Altre variabili che è possibile configurare nello script sono
imgP: percorso (path) immagini piccole
imgG: percorso (path) immagini grandi (se diverso da quello delle immagini piccole)
defDOrd: ordine di visualizzazione delle immagini di default (ORD = ordinato RND = casuale)
defAniTime: tempo di animazione di default in millisecondi (fade-in, fade-out)
defPTime: tempo di visualizzazione dell'immagine dopo l'animazione (in millisecondi)
defGrBox: nome gruppo lightbox da assegnare di default se non viene specificato altro
defArrBox: nome dell'array da usare di default se non viene specificato altro
In generale è sufficente specificare un percorso per le immagini e configurare l'array, il resto si può tralasciare e modificare successivamente in caso di necessità.
Installazione. Passo 3 inserimento nella pagina.
Dopo aver configurato lo script, caricato tutte le immagini ed i file necessari sul proprio server, ed inserito il codice nella sezione HEAD della pagina di interesse si può ora procedere all'inserimento di una o più Box nella nostra pagina.
Il codice da inserire è il seguente:
<script> creaBox("BoxOrd");</script>
Questo creerà un box chiamato BoxOrd ed utilizzerà tutti i valori di default specificati nel file "egFadeBox_data.js".
E' possibile configurare ogni singola casella con parametri personalizzati e diversi tra loro
<script>creaBox(nBox,sBox,aniTime,pTime,arrBox,dOrd,grBox);</script>
In dettaglio:
nBox: nome della casella
sBox: classe stile della casella (lo stile dovrà essere presente nel file "egFadeBox.css" o in un altro foglio stile o direttamente nella pagina attraverso i tag <style></style>
anitime: tempo di animazione fade-in/out
pTime: tempo di visualizzazione dell'immagine nella casella
arrBox: array da usare per la casella in questione
dOrd: ordine di Visualizzazione delle immagini nella casella corrente
grBox: gruppo lightbox da assegnare alle immagini visualizzate nel box corrente
Ad esempio
<script>creaBox("laMiaCasella","ilMioStile",2000,1000);</script>
Creerà una casella chiamata "laMiaCasella" alla quale verrà assegnato lo stile "ilMioStile", l'animazione sarà di 2 secondi sia in entrata che in uscita e l'immagine rimarrà visibile per un secondo prima di scomparire di nuovo e passare all'immagine successiva.
Esempi.
Trovate molteplici esempi all'interno dell'archivio
Download.
EGFadeBox ver. 0.1 (archivio ZIP) 1,6 Mb
EGFadeBox ver. 0.1 (archivio TAR.GZ) 1,6 Mb
Note.
Il file contiene tutto il necessario (lightbox, jquery, EGFadebox). Se già usate lightbox o jquery nel vostro sito è possibile utilizzare i files già in vostro possesso purchè la versione di jquery sia la 1.4 o più recente.
Utilizzare troppe caselle nella stessa pagina può mettere a dura prova il vostro browser ed il vostro computer (se un po' datato)
Questa è una prima versione, il codice può essere migliorato e sicuramente non è privo di bachi.
Ogni comunicazione su questo script può essere inviata qua.
Se ti piace questo script forse può piacerti anche
- EGShareAPage Condividi le tue pagine su social network e servizi Bookmark
- EGCA (Cumulus Anywhere). Inserisce una "tag cloud" su qualsiasi sito
Per qualsiasi ulteriore informazione puoi
contattarci.
Hai bisogno di un software simile? Guarda
il nostro servizio Piccoli Software. |
