Arricchire un sito con belle gallerie di immagini è cosa comune. Molti webmaster, anzi, fanno di esse la principale sezione: che si tratti di paesaggi, delle foto dell'ultimo viaggio, di ritratti più o meno discinti di belle fanciulle le immagini sono sempre una bella attrattiva.
Lo schema è noto a tutti. Ci sono in genere gallerie di thumbnails cliccando sulle quali si visualizza l'immagine più grande, pronta per essere salvata. Il successo di questo tipo di applicazione è testimoniato dalla nascita di programmi ad hoc (il più noto è Arles Image Web Page Creator) e dal fatto che editor blasonati come Dreamweaver abbiano strumenti dedicati alla creazione di album fotografici per il web.
In genere, però, l'uso di questi strumenti non è garanzia di efficenza e facilità di gestione. Immaginate di avere una raccolta ampia, da suddividere in più categorie. Il numero delle pagine tenderà a crescere a dismisura e la loro gestione vi causerà certamente molti mal di testa. Usando pagine dinamiche tutto diverrà più semplice e facile da organizzare. Nello schema semplice e basilare che vi proponiamo ne possono bastare due o tre. Al lavoro, dunque!
Cosa ci serve
Gli strumenti di cui abbiamo bisogno sono pochi:
- Ultradev 4
- un database Access
- l'estensione Horizontal Looper 2, di Basic Ultradev (clicca qui per scaricare).
Il database
Lavoreremo partendo da un database Access che nomineremo "galleria.mdb". Semplice la sua struttura. Contiene due tabelle:
- Categorie - Contiene le categorie di partenza con il rispettivo identificatore (campo idcat). Le categorie dipendono ovviamente dalla vostra galleria: se fossero foto personali potrebbero essere: famiglia, amici, viaggi, etc. Se fosse una raccolta di foto di attrici italiane avremo: Francesca Neri, Sabrina Ferilli e così via.
- Immagini - Questa tabella contiene dati essenziali. Un identificativo della foto, l'indicazione della categoria di appartenenza (vedi sopra), due campi che contengano il nome del file della thumbnail e quello dell'immagine più grande. Basta il nome. Non è necessario, e vedremo perchè, inserire il path esatto delle immagini. La tabella può ovviamente essere
arricchita a piacere con altri campi. Questi sono quelli essenziali.
Per una più comoda gestione del database è opportuno creare una relazione uno-a-molti tra le due tabelle. Nell'immagine potete osservare la struttura delle due tabelle con i tipi di dati e lo schema della relazione (figura 1 - clicca per visualizzare).
Riassumendo. Nella tabella Categorie avremo questo schema:
| idCat | categoria |
| 1 | paesaggi |
| 2 | monumenti |
| 3 | ............ |
Nella tabella Immagini invece:
| idFoto | idCat | thumb | immagine |
| 1 | 1 | 1piccola.jpg | 1.jpg |
| 2 | 2 | 2piccola.jpg | 2.jpg |
| 3 | 1 | 3piccola.jpg | 3.jpg |
La prima pagina
Nella prima pagina (che chiameremo "foto.asp") inseriremo una sorta di indice delle categorie. A ciascuna voce assegneremo un link che punta alla pagina "thumbs.asp". Quest'ultima cambierà il suo contenuto a seconda della categoria cliccata. In pratica: se clicco sul link "paesaggi" in thumbs.asp vedrò le thumbnails dei paesaggi. Chiaro? Potete vedere una mini-applicazione di esempio per osservarne il funzionamento.
Ovviamente, il link verso "thumbs.asp" dovrà contenere una query-string che andrà a filtrare un recordset. Pertanto, i link avranno questa forma:
thumbs.asp?idcat=identificativo della categoria
Visto che nel nostro esempio la categoria paesaggi ha come identificativo 1, il link sarà così:
thumbs.asp?idcat=1
Procedete così con il resto delle categorie.
La pagina delle thumbnails
È un pò il cuore dell'applicazione. Per prima cosa bisogna stabilire una connessione al database "galleria.mdb". Il metodo sarà quello che meglio si adatta alle vostre esigenze e al vostro server. Negli esempi che proporremo essa sarà chiamata "connFoto".
Stabilita la connessione si crea un nuovo recordset. Dalla finestra Data Bindings click su + e selezionare Recordset/Query. Il recordset è basato sulla tabella Immagini e va filtrato in base al valore della query-string passata dal link della pagina precedente (figura 2 - clicca per visualizzare).
A questo punto dobbiamo creare la struttura per visualizzare le thumbnails nella pagina. Vi aspettereste che è il momento di creare una tabella con otto o nove celle. Non è così. Tutto è più semplice grazie all'estensione Horizontal Looper. Ma procediamo con ordine.
Inserite nella pagina una tabella con una sola colonna e una sola riga. Impostate il cellpadding e il cellspacing su valori superiori a 0 per spaziare le immagini. Posizionatevi col cursore all'interno dell'unica cella: è il momento di inserire l'immagine della thumbnail. Dal menu Insert scegliete Image. Nella prima finestra che vi compare selezionate l'opzione Data Sources: non stupitevi, la nostra immagine non è statica. Il suo URL lo ricaviamo dal database. Nella finestra successiva espandete la visualizzazione del recordset e selezionate il campo thumb (figura 3 - clicca per visualizzare).
Fermi un attimo. Perchè ora spiegheremo un bel trucchetto. Nel nostro database abbiamo inserito solo il nome del file, ricordate? Ora, supponiamo che le imamagini siano in una cartella chiamata "foto". Se lasciate tutto così al momento di visualizzare la pagina non comparirà nulla. Ma il trucco c'è. Osservate la figura 3, in basso. Nel campo URL aggiungiamo all'inizio il path della cartella, quindi: foto/. Se le thumbnails fossero localizzate in una sottocartella "thumbs" all'interno di "foto" avremmo aggiunto: foto/thumbs/. Spero che tutto sia chiaro.
A questo punto avrete sulla pagina una cella di tabella con un segnaposto per immagini. È il momento di usare l'estensione. Horizontal Looper è utilissima perchè consente di superare le limitazioni del behavior Repeat Region: riesce a fare il loop di un record in senso orizzontale e verticale. Tutto ciò che dovrete scegliere è quante immagini volete mostrare nella pagina. Dunque, selezionate il simbolo della thumbnail. Tra i Server Behaviors scegliete Horizontal Looper 2. La finestra di configurazione è semplicissima (figura 4 - clicca per visualizzare). Vi chiede quante colonne e quante righe volete avere nella pagina. Supponiamo di voler mostrare 9 immagini: sceglierete 3 colonne e 3 righe. Nell'esempio abbiamo impostato 2x2. Click su OK per concludere.
E se le immagini di una certa categoria sono più di 9? Facile. Posizionatevi con il cursore nel punto che preferite (magari sotto la tabella delle thumbnails). Dalla palette Objects selezionate Live e quindi l'oggetto Recordset Navigation Bar (figura 5 - clicca per visualizzare). L'unica impostazione da settare riguarda il recordset e se i link saranno di tipo testuale o immagini. Dopo aver cliccato su OK vedrete al centro della pagina una tabella con i classici link Previous-Next. Potete ovviamente personalizzare in italiano (badando a non cancellare il codice del link!).
Un ultimo passo. Dobbiamo impostare il link alla foto grande. Qui avete due opzioni: visualizzare direttamente l'immagine grande in una nuova finestra o mostrarla in una nuova pagina. Nel primo caso il link sarà ad un file .jpg. Nel secondo ad una pagina.asp.
La prima opzione è quella più semplice. Selezionate ancora una volta il simbolo della thumbnail e seguite la procedura standard per inserire un link. Come in precedenza spuntate l'opzione Data Sources (il link è dinamico!), espandete il recordset e selezionate il campo immagine (figura 6- clicca per visualizzare). Di nuovo, ricordatevi di inserire il path giusto nel campo URL se le immagini non sono nella stessa cartella della pagina.
Siamo ai saluti. L'esempio è ovviamente molto basilare, ma lascio alla vostra fantasia e alla vostra voglia di approfondire la ricerca di soluzioni diverse. Sempre a disposizione per ogni chiarimento. Alla prossima!
