Effetto Lightbox su immagini estratte da database
Nel presente articolo vedremo una implementazione dell'effetto Lightebox applicato su delle immagini
estratte dal database Access. Mentre nel precedente articolo
abbiamo visualizzato solo le immagini nella tabella, oggi proveremo ad implementare questo script per dare la possibilità
di visualizzare l'immagine ingrandita. L'uso che se ne potrebbe fare è dei più svariati. Possiamo dire che è una sorta
di dettaglio con un effetto molto simpatico che vediamo quotidianamente nei siti web.
La procedura non è per nulla dissimile da quelle viste nell'esempio precedente delle immagini "statiche", quindi possiamo
partire con la creazione della tabella del database nella quale ho inserito i seguenti campi:
- id
- testo [opzionale]
- URL della miniatura
- URL dell'immagine ingrandita
Schematizzando un solo record della tabella, avremo:
| id |
testo |
URL_miniatura |
URL_immagine |
| 1 |
Immagine 1 |
Cartella/Miniatura.jpg |
Cartella/Immagine.jpg |
Fatto questo passaggio, inseriamo nella pagina un Controllo GridView ed associamolo al nostro database.
Selezioniamo la tabella dalla quale attingere i dati. Siccome non possiamo sapere quante immagini avremo e non possiamo
collegare manualmente la miniatura all'immagine grande, dobbiamo scrivere un pò di codice, come quello postato
di seguito:
<a href='<%# DataBinder.Eval(Container.DataItem,("NomeCampoImmagine"))%>' rel='lightbox[group]'>
<img src='<%# DataBinder.Eval(Container.DataItem,("NomeCampoMiniatura"))%>' alt="" /></a>
Questo codice ci permette di inserire quante immagini vogliamo e di avere su tutte, l'effetto desiderato.
Qui in basso l'esempio completo.
| Descrizione | Immagine |
| Foto 1 |
|
| Foto 2 |
|
| Foto 3 |
|
| Foto 4 |
|
| Foto 5 |
|
| Foto 6 |
|