Lightbox super semplice con CSS e jQuery

Piuttosto che usare un plugin gonfio con caratteristiche che non utilizzerai mai, questo tutorial ti mostra come creare un lightbox super semplice per la gestione delle immagini. È perfetto per gallerie di immagini, portafogli e altro!

Passaggio 1: Il markup

Apri il tuo editor di testo preferito (io uso Coda) e iniziamo con il nostro markup HTML.

Nota: Se non si fornisce un DOCTYPE corretto e il rendering della pagina in modalità Quirks, la lightbox non verrà visualizzata correttamente in Internet Explorer.

   Lightbox semplice    Lightbox super semplice
 La nostra demo lightbox super semplice. Ecco i link delle immagini: 
   Immagine 1  
   Immagine 2  
   Immagine 3

Nota: Abbiamo usato la classe lightbox_trigger su ogni link che ha un'immagine che vogliamo mostrare nella nostra lightbox. Questo diventa utile quando vogliamo indirizzare quegli elementi nella sceneggiatura che scriveremo.

Passaggio 2: il CSS

Applichiamo alcuni stili CSS di base alla nostra pagina. Per questo esempio di base, inseriremo tutti i nostri CSS tag all'interno del sezione.

body margin: 0; padding: 0; sfondo: #efefef; text-align: center; / * usato per centrare div in IE * / #wrapper width: 600px; margine: 0 auto; / * centra orizzontalmente il div in tutti i browser (tranne IE) * / background: #fff; text-align: left; / * ripristina l'allineamento del testo dal tag body * / border: 1px solid #ccc; border-top: none; padding: 25px; / * Aggiungiamo alcuni stili CSS3, questi si degraderanno con garbo nel browser precedente e IE * / border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc;

Ora abbiamo una pagina semplice ma elegante in cui possiamo testare la nostra finestra lightbox.

Passaggio 3: note su CSS in Internet Explorer

Abbiamo usato margine: 0 auto; per centrare il nostro div #wrapper orizzontalmente sulla pagina. Funziona alla grande per tutti i browser eccetto ... rullo di tamburi ... avete indovinato, Internet Explorer. Per risolvere questo problema, abbiamo usato text-align: center; sul tag del corpo che centra le div al bambino (nel nostro caso, il div #wrapper) orizzontalmente sulla pagina.

Tuttavia, usando text-align: center; sul tag body centrerà anche tutto il testo in div. Per risolvere questo problema, abbiamo ripristinato text-align: left; nel div #wrapper per ripristinare tutti gli altri contenuti secondari nell'allineamento a sinistra. Visita communitymx.com se sei interessato a saperne di più su questo particolare problema di IE.

Passaggio 4: HTML Lightbox

Questo è l'aspetto del nostro markup HTML lightbox. Tuttavia, non inserirlo nel markup HTML. Lo faremo dinamicamente con jQuery. Capire il lightbox HTML markup ci consente di modellarlo di conseguenza con i CSS.

 Clicca per chiudere

Nota: Non c'è valore per l'immagine src perché dipenderà da quale link viene cliccato dall'utente. Quindi, useremo javascript per inserire il valore dinamicamente in seguito.

Passaggio 5: Overlay nero CSS di Lightbox

Andiamo avanti e inseriamo il CSS per il nostro lightbox. Facendo questo ora, i nostri elementi di pagina verranno visualizzati correttamente in seguito quando inseriremo dinamicamente il nostro HTML.

Per prima cosa abbiamo il nostro # lightbox div che funge da sovrapposizione nera. Vogliamo che questo riempia l'intera finestra dell'utente, indipendentemente dalla risoluzione dello schermo.

#lightbox position: fixed; / * mantiene la finestra lightbox nella finestra corrente * / top: 0; a sinistra: 0; width: 100%; height: 100%; background: url (overlay.png) repeat; text-align: center;

Il CSS è piuttosto semplice. Ecco alcuni punti salienti:

position: fixed rende la nostra sovrapposizione visualizzata correttamente nella finestra corrente, indipendentemente dalla posizione dell'utente sullo schermo (in alto o in basso nella pagina). È qui che usare il DOCTYPE giusto è utile. Se IE viene eseguito in modalità strane a causa del DOCTYPE errato (o del tutto assente), la nostra sovrapposizione non verrà visualizzata correttamente.
width: 100%; height: 100%; Questo rende il nostro # lightbox div, che agisce come la sovrapposizione di nero, copre l'intera finestra, indipendentemente dalla risoluzione dello schermo dell'utente finale.
background: url (overlay.png) repeat; Avremmo potuto usare il colore RGBa per rendere il nostro colore di sfondo leggermente trasparente. Questo avrebbe richiesto qualcosa di simile sfondo: rgba (0,0,0, 0,7);. Tuttavia, poiché questa proprietà è abbastanza nuova, la trasparenza del colore di sfondo non funzionerà in IE (a meno che non applichi determinati hack). Quindi, invece di usare gli hack CSS3 e IE, creiamo semplicemente un PNG 1x1 pixel in Photoshop con uno sfondo nero e impostiamo la trasparenza a circa il 75%.

Passaggio 6: Istruzioni per l'utente di Lightbox Lightbox

Solo per assicurarci che i nostri utenti non siano confusi, aggiungeremo del testo nella sovrapposizione lightbox affermando che possono fare clic ovunque per far scomparire la finestra di lightbox.

#lightbox p text-align: right; color: #fff; margin-right: 20px; font-size: 12px;

Passaggio 7: Immagine CSS Lightbox

Ora vogliamo modellare l'immagine che apparirà nella lightbox. Semplicemente gli darò alcuni effetti CSS3. Questi ovviamente non appariranno in IE e nei browser più vecchi, ma si deteriorano ancora con grazia. Potresti aggiungere altri effetti qui, se lo desideri, come un bordo bianco attorno all'immagine.

# lightbox img box-shadow: 0 0 25px # 111; -webkit-box-shadow: 0 0 25px # 111; -moz-box-shadow: 0 0 25px # 111; max-width: 940px;

Nota:Aggiungere un larghezza massima ridurrà qualsiasi immagine ad alta risoluzione a cui potremmo collegarci. Questo aiuta a garantire che tutte le immagini si inseriscano nel viewport.

Ecco come sarebbe la nostra pagina se inserissimo il nostro lightbox HTML nel documento (lo faremo con javascript):

Immagine gentilmente concessa da CSS Lounge Photostream su Flickr

Passaggio 8: Determinazione della logica

Se l'utente fa clic su un collegamento all'immagine, vogliamo visualizzare l'immagine in una lightbox. Per fare questo, prima vogliamo determinare la logica dietro la nostra funzionalità:

L'utente fa clic sul collegamento con la classe lightbox_trigger
- Impedisci al browser di seguire il link per impostazione predefinita
- Vedi se il lightbox div è già presente nel documento
  - Se esiste:
    - Trova e l'esistente img tag all'interno del soddisfare div.
    - Sostituisci l'immagine src valore con il href valore di qualunque link è stato cliccato.
  - Se non esiste:
    - inserisci il markup lightbox nella pagina con l'immagine src valore impostato su href valore di qualunque link è stato cliccato
Lasciare qualsiasi clic sul lightbox (quando visualizzato) per farlo sparire

Passaggio 9: Javascript incluso jQuery

Ora che abbiamo il nostro markup HTML, lo stile CSS e la logica javascript, è tempo di approfondire il codice e di far funzionare la nostra funzionalità.

Per prima cosa includiamo la libreria jQuery. Mi piace aggiungerlo subito prima della chiusura corpo tag usando la versione in hosting di jQuery.

Passaggio 10: script personalizzato Javascript

Inseriamo il nostro codice copione tag e documento di jQuery.ready

Includeremo il nostro script personalizzato subito dopo aver incluso la libreria jQuery. Impostiamo la nostra funzione jQuery usando il simbolo del dollaro "$" nel parametro function, in questo modo non dobbiamo scrivere "jQuery" ogni volta che vogliamo usare la funzionalità jQuery. Invece possiamo semplicemente usare "$".

Passaggio 11: Javascript `lightbox_trigger` Funzione

Come spiegato in precedenza nel passaggio 1, per ogni immagine collegata che utilizzerà la lightbox, è stata assegnata una classe di lightbox_trigger. Nel nostro script, creiamo una funzione che attiverà ogni volta un collegamento con la classe lightbox_trigger è cliccato.

$ ('. lightbox_trigger'). click (function (e) // Codice che fa apparire la lightbox);

Passaggio 12: Javascript all'interno della funzione

Per prima cosa, vogliamo impedire l'azione predefinita. Ciò impedisce al browser di aprire l'immagine collegata in una nuova pagina. (Per vedere perché usiamo preventDefault () clicca qui

e.preventDefault ();

Successivamente, otteniamo il href dell'immagine che mostreremo nella lightbox dal link su cui è stato fatto clic

var image_href = $ (this) .attr ("href");

È qui che entra in gioco la nostra logica predeterminata. Poiché stiamo inserendo dinamicamente il nostro lightbox HTML, vogliamo prima vedere se esiste già nel documento. Quindi, eseguiremo una dichiarazione if / else.

Se

Se la lightbox div esiste, sostituiremo il img tag all'interno del soddisfare div. Ci assicureremo anche il src il valore del tag immagine è impostato per corrispondere a href di qualunque collegamento è stato fatto clic.

if ($ ('# lightbox'). length> 0) // #lightbox esiste // inserisci il tag img con href del link cliccato come valore src $ ('# contenuto'). html (''); // mostra lightbox window - puoi usare una transizione qui se vuoi, cioè ... mostra ('veloce') $ ('# lightbox'). show ();

Altro

Se il nostro lightbox div non può essere trovato nel documento, lo creeremo e lo inseriremo. Questo verrà eseguito solo la prima volta che viene fatto clic su un collegamento lightbox.

else // # lightbox non esiste // crea un markup HTML per la finestra lightbox var lightbox = ''+'Clicca per chiudere
'+''+ // inserisci il link cliccato href in img src''+'
'+'
'; // inserisce lightbox HTML nella pagina $ ('body'). append (lightbox);

Passaggio 13: Javascript Nasconde la finestra di lightbox

Infine, vogliamo nascondere la finestra della lightbox ogni volta che l'utente fa clic su di essa. Perché il div lightbox è inserito dopo che il DOM è già stato costruito (la pagina è già stata caricata) dobbiamo dire a jQuery che stiamo inserendo un nuovo div nella nostra pagina e per osservare i clic su questi nuovi elementi. Lo facciamo usando .live () piuttosto che .click ()

$ ('# lightbox'). live ('click', function () $ ('# lightbox'). hide (););

Passaggio 14: codice finale Javascript

Ora che abbiamo esaminato il nostro script lightbox, ecco come appare l'intera cosa:

Prodotto finale

Immagine gentilmente concessa da CSS Lounge Photostream su Flickr

Questo è tutto! Ora hai una soluzione lightbox leggera per la visualizzazione delle immagini. Spero ti sia piaciuto questo tutorial e ho imparato qualcosa di nuovo! Grazie per aver letto.

Opzioni Premium

Questo tutorial ti ha insegnato l'approccio fai-da-te, ma se preferisci una soluzione già pronta, Envato Market ha a disposizione molti plugin lightbox. Ecco una selezione dei più popolari:

1. Evolution di Lightbox per WordPress

Lightbox Evolution è uno strumento per la visualizzazione di immagini, contenuti html, mappe e video in uno stile "lightbox" che galleggia sopra la pagina Web. Utilizzando Evolution di Lightbox, gli autori di siti Web possono mostrare un vasto assortimento di media in tutti i principali browser senza allontanare gli utenti dalla pagina di collegamento. C'è anche una versione di jQuery.

Evolution per WordPress

2. iLightBox · Plugin di Lightbox rivoluzionario

iLightBox ti consente di creare facilmente le finestre overlay di risposta più belle utilizzando la libreria JavaScript jQuery. Combinando il supporto per un'ampia gamma di media con skin meravigliose e un'API user-friendly, iLightBox punta a spingere il concetto Lightbox il più lontano possibile.

iLightBox · Plugin di Lightbox rivoluzionario

3. PopupPress - Popup con slider e lightbox per WP

PopupPress è un plugin per Wordpress che ti permette di creare facilmente finestre sovrapposte eleganti. Questo plugin ha lo scopo di inserire qualsiasi tipo di contenuto in un Popup nel modo più semplice e veloce su qualsiasi pagina di WordPress. Ha anche una semplice statistica di sistema per il numero di visualizzazioni dei popup.

PopupPress - Popup con Slider & Lightbox per WP

Web design