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: lo zoom delle immagini in rotazione non viene fatto e non è presente il messaggio di caricamento)
- Opera 6.0 (e superiori)
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:
<SCRIPT type="text/javascript" src="3DPG.js"></SCRIPT>
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 è:
oggettoPGphoto = new PGphoto(URLicon[,didascalia,URLbigImg,preloading])
Nel quale i parametri hanno i seguenti significati:
- URLicon - (stringa) è il percorso dell'immagine icon
- didascalia - (codice HTML) codice HTML per la didascalia dell'immagine
- URLbigImg - (stringa, URLicon di default) è il percorso dell'eventuale immagine bigImg. Qualora non sia definito, la bigImg coinciderà con la icon
- preloading - (1[true]| 0[false], 0 di default) se settato a 1 (o true) viene eseguito il precaricamento per la bigImg
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:
var arrayPGphotos = [
new PGphoto("icons/tg3.jpg","<b>Frankenstein Junior</b><br><br>SI PUO' FARE!!!","images/g3.jpg"),
new PGphoto("icons/tg5.jpg","<b>Frankenstein Junior</b><br><br>Oh...sei un bravo ragazzo,<br>sei l'angelo del focolare","images/g5.jpg"),
new PGphoto("icons/tg10.jpg","<b>Frankenstein Junior</b><br><br><small>(immagine precaricata)</small>","images/g10.jpg",1),
new PGphoto("icons/tg12.jpg","<b>Frankenstein Junior</b><br><br>Frankenstein...Senior","images/g12.jpg"),
new PGphoto("icons/tg17.jpg","<b>Frankenstein Junior</b><br><br>dai dai, vieni anche tu!","images/g17.jpg"),
new PGphoto("icons/tg18.jpg","<b>Frankenstein Junior</b><br><br>S V A N S H T U K A !!!","images/g18.jpg"),
new PGphoto("icons/tg19.jpg","<b>Frankenstein Junior</b><br><br>io szono Fräu Blucher (HIIIIIFRRRR)","images/g19.jpg")
]
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 è:
oggettoPG = new PG(arrayPGPhotos,InitPGPhoto,
WIcons,HWRatio,WbigImg,Zoom,
xPos,yPos,radius,inclination,number,
Func,otherArgs)
dove:
- arrayPGPhotos - (array di PGphoto) l'array di PGphoto, precedentemente definito, che conterrà gli elementi della galleria di immagini
- InitPGPhoto - (oggetto PGphoto | null) oggetto PGphoto relativo all'(eventuale) immagine iniziale. In questo caso, il parametro URLicon può gia contenere il percorso ad un'immagine ad alta risoluzione, es:
var InitialPhoto = new PGphoto("images/me.jpg",
"<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 - (int) larghezza (in pixel) delle icone (a Zoom 0) (accessibile attraverso: oggettoPG.DM)
- HWRatio - (real) rapporto altezza/larghezza delle immagini (accessibile attraverso: oggettoPG.HWR)
- dimPhoto - (int) larghezza (in pixel) dell'immagine centrale (accessibile attraverso: oggettoPG.DMF)
- Zoom - (int [0:50]) percentuale di zoom. I valori consigliati sono compresi tra 0 e 50
- xPos - (int) coordinata X (pixel da sinistra) del centro della circonferenza di immagini (accessibile attraverso: oggettoPG.xPG)
- yPos - (int) coordinata Y (pixel dall'alto) del centro della circonferenza di immagini (accessibile attraverso: oggettoPG.yPG)
- radius - (int) raggio della circonferenza di immagini (accessibile attraverso: oggettoPG.r)
- inclination - (int) gradi di inclinazione rispetto al piano dello schermo (XY)
- number - (int[>=1]) intero da associare differente ad ogni PG nel documento. Se c'è un solo PG, il valore di default è 1.
- Func - (string | null) nome della propria funzione da lanciare al click
- otherArgs - (string | null) nome dell'array di parametri da associare ad ogni icona
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:
- (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.
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: Poichè, nel dettaglio, il visualizzatore d'immagini è realizzato scrivendo dinamicamente codice HTML nella pagina, l'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:
- oggettoPG.rotate(orario,AngleStep)
Il metodo rotate mette in rotazione il 3DPG, secondo le direttive passate nei parametri:- orario - (1[true]| 0[false]) se settato a 1 (o true) la rotazione avviene in senso orario, se 0 (o false) in senso antiorario.
- AngleStep - (real) n° di gradi ruotati in ogni passo dell'animazione. È una misura della velocità di rotazione.
- 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 - (1[true]| 0[false]) se 1 (o true) il 3DPG è visibile, no altrimenti.
- oggettoPG.init() Il metodo inizializza gli elementi del 3DPG. Questo metodo è lanciato automaticamente alla creazione dell'oggetto PG. In generale quindi non occorre utilizzarlo. Alle volte è consigliabile però, soprattutto in Opera, re-inizializzare i propri PG al caricamento della pagina (evento onload) per evitare possibili errori di visualizzazione. Segue il codice utilizzato a questo scopo negli esempi proposti:
if(window.opera) {
onload = function(){oggettoPG.init();}
}
Altre proprietà personalizzabili sono:
-
oggettoPG.depth - (real) La proprietà definisce la "profondità" dell'immagine centrale rispetto al centro della circonferenza: più il valore di depth aumenta e più l'immagine centrale emerge dal piano
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 - (int) Si riferisce al numero di millisecondi tra due passi consecutivi dell'animazione. Per default è settato a 20. Modificandolo è possibile rallentare o velocizzare la rotazione nei limiti delle capacità del processore dell'utente.
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:
-
PG.prototype.LoadingMsg - (codice HTML) Definendo questa proprietà si può personalizzare il messaggio che compare al caricamento delle immagini. Il messaggio di default è stato definito con la sintassi:
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 la proprietà permette di definire il nome e il percorso di un'immagine trasparente che occorre usare qualora non si definisca un'immagine iniziale per il 3DPG. es:
PG.prototype.NoImagePath = "../icons/1pix.gif"
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:
- È 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.
Esempi
Vediamo ora qualche esempio esplicativo dell'uso del 3-Dhtml Photo Gallery. Il codice utilizzato aiuterà a capire il funzionamento dello script:
