Il sito per imparare gratuitamente a fare pagine Web

JavaScript E2
















E2 - Lightbox: ingrandire e sfogliare le immagini grafiche presenti nella pagina web. (V 2.6)


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti: Lokesh Dhakar
Name:
Website: Sito di riferimento

Descrizione: Ingrandire e/o sfogliare le immagini di una pagina web oscurando tutto il resto, creare così una galleria grafica che si lascia visitare con i tasti freccia (destra > e sinistra <) o col mouse cliccando su i relativi simboli. Il tasto Esc o il click del mouse sulla X per uscire.

Provate a fare click su uno dei links sotto, quelli testuali o le piccole immagini e seguite le istruzioni oltre ad ammirare l'effetto grafico.




Serie di 5 immagini (link grafico) per piccola galleria:

immagine 1 di 5   immagine 2 di 5   immagine 3 di 5   immagine 4 di 5   immagine 5 di 5




Serie di 3 immagini (link testuale) con altro nome di galleria.

immagine #1   immagine #2   immagine #3

Passo 1 :

Scaricate il file che contiene tutto il necessario per il buon funzionamento. Il file è in formato zip si riferisce alla versione 2.6, scompattate il suo contenuto in una cartella, la stessa dove andrete poi a creare la pagina html con l'effetto e lasciate che vengano create le cartelle: css, img e js. nello zip trovate anche la pagina esempio dello stesso autore.

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non vi rimane che trasferire il tutto nella vostra pagina web, in questo caso fra i tags: <head> e </head>.

seleziona tutto


Passo 2 :

Non resta che attivare l'effetto aggiungendo al vostro link l'attributo rel, in questo modo: (link che si trova all'interno dei tags: <body> e </body>).

seleziona tutto


Passo 3:

Volendo creare una galleria a tutti i vari links si dovrà assegnare lo stesso nome all'interno del suo attributo rel inserito fra parentesi quadre []:

seleziona tutto




Note : Ho usato weblink come nome della galleria ma qualsiasi altro nome avrebbe funzionato allo stesso modo, se nella stessa pagina ci sono più gallerie, o serie di immagini, sarà sufficiente cambiare nome per suddividerle in gruppi.
Lo script è molto complesso ed incorpora anche un preload delle immagini per evitare i tempi di attesa in fase di funzionamento.

Fare sempre riferimento al Sito originale di Lokesh Dhakar sul quale reperire l'ultima versione disponibile ed approfondire alcune caratteristiche dello script stesso.



Valutazione

Valutazione: 2.84 stelle su 5
N. Voti: (155)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.