Descrizione: Image Thumbnail Viewer è un visualizzatore di immagini compatto, non intrusivo che può essere applicato ad ogni tipo di link per caricare immagini all'interno di un'interfaccia gradevole. Semplicemente basta dare al link in questione – che può essere testuale o un'immagine – un attributo rel "thumbnail".
Lo script centrerà l'immagine nella pagina mostrando un testo opzionale basato sul testo inserito nell'attributo "title" del link. Un effetto fading può essere aggiunto o tolto nella visualizzazione dell'immagine.
Step 1: Aggiungere questo codice tra i tag <head>
[html] [/html]
Per questo effetto c'è bisogno di tre file:
- thumbnailviewer.css
- thumbnailviewer.js
- loading.gif (per la scritta "loading")
Step 2: Inserire normale codice html come questo
[html]
[/html]
Qualche opzione la si può scegliere editando il file thumbnailviewer.js
[html]//Dentro thumbnailviewer.js
enableTitle: true, //L’attributo title deve essere una descrizione?
enableAnimation: true, //Abilitare l’effetto fade?
definefooter: ‘
‘, //Definisce l’HTML del footer
defineLoading: ‘
Loading Image…’, //Definisce l’HTML per il div “loading”[/html]
Qui un esempio funzionante e qui uno zip per scaricare tutto il necessario.
Il mio stack è PHP/MySQL/Git/Docker. Lavoro con Agile (Scrum) e utilizzo principalmente AWS come cloud provider.
Sono papà e marito. Nel tempo libero mi piace leggere, il buon vino e viaggiare.
- Installare Nginx Proxy Manager su Portainer e aggiungere proxy host - 11 Marzo, 2024
- GIT: differenza tra CHECKOUT e SWITCH - 4 Marzo, 2024
- Gli Eventi Scrum: Guida Completa e Best Practices - 20 Settembre, 2023
