X
    Categories: Javascript

Thumbnail con Javascript facili

Da Dynamic Drive

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:

Step 2: Inserire normale codice html come questo

[html]

Castle

[/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: ‘

CLOSE X

‘, //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.

Sergio Gandrus: Da febbraio 2024 lavoro come CTO presso Deva Connection 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.