3-Dhtml Photo Gallery
Il 3-Dhtml Photo Gallery (3DPG) è un'originale visualizzatore di immagini in DHTML, con la capacità di poter essere personalizzato per le proprie necessità. Lo script unisce i principi base delle animazioni in DHTML (come l'uso della ricorsività e dei metodi per la gestione delle temporizzazioni) all'uso dei metodi matematici.
Compatibilità
Alla luce delle verifiche che ho potuto fare, la compatibilità dello script è molto estesa. Ad eccezione, infatti, del solo Netscape 4, il 3DPG è supportato correttamente dalla maggior parte dei browser. I test fatti hanno mostrato la compatibilità dello script nei seguenti browser:
- Explorer 4 (e superiori)
- Netscape 6.2.7 (e superiori)
- Mozilla 1.0 (e superiori)
- Opera 5.0 (nota
- Opera 6.0 (e superiori)
- URLicon
- didascalia
- URLbigImg
- preloading
- arrayPGPhotos
- InitPGPhoto
"<b>3-DHTML Photo Gallery</b><br><br>by William Verdolini<br>mail: w.verdolini@html.it")Nel caso in cui venga passato il valore null, il 3DPG mostrerà una gif trasparente come immagine iniziale.
- WIcons
- HWRatio
- dimPhoto
- Zoom
- xPos
- yPos
- radius
- inclination
- number
- Func
- otherArgs
- (necessario) il primo argomento deve essere un indice associato ad ogni immagine (icona).
- (opzionale) il secondo argomento (se esiste), deve essere un valore dell'array passato al costruttore PG (come parametro otherArgs). L'indice dell'array è quello associato all'icona.
- oggettoPG.rotate(orario,AngleStep)
Il metodo rotate mette in rotazione il 3DPG, secondo le direttive passate nei parametri:- orario
- AngleStep
- oggettoPG.stop() Il metodo interrompe la rotazione del 3DPG
- oggettoPG.incline(inclinazione) Il metodo permette di inclinare il 3DPG di un angolo il cui valore è passato come parametro:
- inclinazione - (int) gradi di inclinazione rispetto al piano dello schermo (XY)
-
oggettoPG.visible(visibile) Il metodo permette di rendere visibile o meno l'intero 3DPG, a seconda del valore del parametro:
- visibile
- oggettoPG.init()
onload = function(){oggettoPG.init();}
} -
oggettoPG.depth
della circonferenza.Il valore di default è 2.1 e corrisponde quindi anche al valore iniziale della proprietà. Per modificare sin dall'inizio il valore di depth, occorre modificare il prototipo della proprietà stessa prima di creare l'oggetto PG. La sintassi dovrà perciò essere del tipo:
PG.prototype.depth = valore
-
oggettoPG.minCPUres
-
PG.prototype.LoadingMsg
PG.prototype.LoadingMsg = "<br>Loading...<br><br>"
Si può inoltre, personalizzare lo stile della didascalia per l'immagine centrale, definendo una classe di stile chiamata "didascalia#", dove il cancelletto (#) dovrà essere sostituito con lo stesso numero passato al corrispondente costruttore PG (parametro number). es:
<style type="text/css">
.didascalia1{background: #EEEEEE; font-family:verdana; font-size: 11px;text-align:center;border:0px;}
</style> -
PG.prototype.NoImagePath
PG.prototype.NoImagePath = "../icons/1pix.gif"
- È meglio re-inizializzare sull'evento onload i vari 3DPG creati (ci possono essere errori di visualizzazione)
- È consigliato definire gli stili (fogli esterni o incorporati) PRIMA di creare i 3DPG
- È fortemente sconsigliato lanciare, nella pagina, funzioni nell'attributo HREF dei link (tag a, con protocollo javascript:), o per lo meno, accertarsi che l'esecuzione della funzione lanciata con <a href="javascript:funzione()"> non avvenga durante la fase di scaricamento delle immagini da server. Off-line il problema scompare.
Utilizzo
Per poter utilizzare lo script occorre innanzitutto scaricare il file: 3DPG.js (9.01 KB) Inseritelo poi nella head delle vostre pagine con il solito metodo per l'inclusione di file JavaScript:
A questo punto, prima di passare alle spiegazioni per un corretto settaggio del 3DPG, vediamo un esempio all'opera: 3-Dhtml Photo Gallery
Setup del 3-Dhtml Photo Gallery
Cominciamo con il definire gli elementi che costituiranno il 3DPG. L'oggetto PGphoto
Come mostrato nella pagina d'esempio, ogni elemento della galleria di foto è caratterizzato da un'immagine e da una didascalia. Ad essere più precisi, le immagini che si possono definire sono due: una (icon) di bassa risoluzione e poco peso (in termini di KB), che è quella che ruota nel 3DPG, e l'altra (bigImg) di risoluzione migliore (e quindi peso maggiore) che può essere visualizzata nello "schermo" del 3DPG.
Questa logica è stata seguita in modo da non gravare pesantemente sul caricamento della pagina evitando, per la rotazione, l'utilizzo di immagini pesanti. L'unico vincolo da rispettare nella scelta di tutte le immagini è quello di mantenere sempre uguale il rapporto altezza/larghezza.
Detto questo andiamo a definire le caratteristiche degli elementi del 3DPG attraverso il costruttore d'oggetti PGphoto, la cui sintassi è:
Nel quale i parametri hanno i seguenti significati:
Per ogni elemento del 3DPG deve quindi essere definito un oggetto PGphoto, che contiene tutte le caratteristiche peculiari dell'immagine. Come sarà poi ulteriormente spiegato, tutti gli oggetti PGphoto così definiti, devono essere contenuti in un array.
Nell'esempio mostrato nella pagina precedente, la definizione dell'array di PGphoto era:
L'oggetto PG
A questo punto possiamo passare alla costruzione del vero e proprio 3-Dhtml Photo Gallery, e alla definizione delle sue caratteristiche. Il setup del 3DPG è realizzato attraverso il costruttore d'oggetti PG, la cui sintassi è:
WIcons,HWRatio,WbigImg,Zoom,
xPos,yPos,radius,inclination,number,
Func,otherArgs)
dove:
Questi due ultimi parametri (Func e otherArgs) danno la possibilità di poter lanciare una propria funzione sull'evento "click". Questa funzione sostituirà la funzione di default, ma deve essere creata "ad hoc" secondo due direttive:
Il seguente codice (utilizzato negli esempi finali) crea un 3DPG che utilizza una nuova funzione per visualizzare le immagini in popup, la cui posizione può essere definita per ogni immagine:
function pop(ind,features) {
window["photo"+ind] = window.open(arrayPGphotos[ind].pho.src,ind,features)
}
popfeatures = ["width=600,height=450,left=0",
"width=600,height=450,left=20",
"width=600,height=450,left=40",
"width=600,height=450,left=60",
"width=600,height=450,top=0",
"width=600,height=450,top=20",
"width=600,height=450,top=40"]
// creazione del 3DPG
Galleria = new PG(arrayPGphotos ,InitialPhoto,
80 ,0.75 ,180 ,0 ,
400 ,250 ,100 ,90, 2,
"pop","popfeatures")
Nota oggetto PG deve essere inserito nel BODY della pagina
Metodi e altre proprietà
Dopo l'introduzione degli oggetti PG e PGphoto, abbiamo tutto il necessario per creare il 3-Dhtml Photo Gallery. Possiamo quindi passare al controllo e alla cura dei "dettagli" del 3DPG descrivendo i metodi e le proprietà definiti per l'oggetto PG. I metodi utilizzabili sono:
Altre proprietà personalizzabili sono:
Siccome il 3DPG viene creato scrivendo dinamicamente codice HTML all'interno della pagina, per poter definire proprietà particolari o iniziali del visualizzatore d'immagini occorre andare a modificare direttamente i prototipi delle proprietà relative prima di definire l'oggetto PG:
Negli esempi della prossima pagina sarà chiarito l'uso dei metodi e delle proprietà per il 3DPG.
Note di Debug
per evitare errori di visualizzazione e di navigazione, per lo più in Opera:
Esempi
Vediamo ora qualche esempio esplicativo dell'uso del 3-Dhtml Photo Gallery. Il codice utilizzato aiuterà a capire il funzionamento dello script: