Una galleria fotografica 3D con DHTML

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)

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:

• URLicon
• didascalia
• URLbigImg
• preloading

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:

• 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

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:

1. (necessario) il primo argomento deve essere un indice associato ad ogni immagine (icona).
2. (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 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
  • 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();}
  }

Altre proprietà personalizzabili sono:

• 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

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

  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"

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:

• 3DPG con console dei comandi - esempio
• 3DPG senza didascalie e prototipi di proprietà modificati - esempio
• 3DPG con lancio di popup per la visualizzazione - esempio
• doppio 3DPG a scelta - esempio
• 3DPG controllato dal mouse (accede alle caratteristiche dell'oggetto PG creato) - esempio