Thumbnail con Javascript facili

Tags:

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 marzo 2018 lavoro come Technical Manager presso PayClick
Programmo in ambiente LAMP e Angular 6.
Realizzo app mobile con Ionic Framework.
Sono papà e marito. Nel (poco) tempo libero mi piace leggere, il buon vino e viaggiare.

Ah, questo blog ha cambiato uso