Come abbiamo visto è semplicissimo creare effetti complessi utilizzando jQuery, un framework per il web che sfrutta javascript.
Oggi vi segnalo un metodo velocissimo per creare le famose lightbox, uno zoom che oscura il resto del sito e mostra l’immagine ingrandita. Per capirsi, provate a premere sull’immagine qui sopra.
Vediamo come fare.
Intanto andiamo sul sito ufficiale del plugin jquery-lightbox e scarichiamo i file sorgenti.
Includiamo poi i due file js (jquery e il plugin) e il file css per lo stile dello zoom.
1 2 3 |
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> |
Per inizializzare lo script invece si procede così nell’header (in alternativa si può inizializzare quando il DOM è stato completamente caricato, ma in questo modo se a metà del caricamento si preme sull’immagine si uscirà dal sito).
1 2 3 4 5 |
<script type="text/javascript"> $(function() { $('.lightbox').lightBox(); }); </script> |
In questo modo il selettore ingloba tutti i link con classe “lightbox”, per una galleria è possibile anche usare
1 |
$('.gallery a').lightBox(); |
che prende tutti i link presenti sotto il div con class=”lightbox”
Nel primo caso basta applicare la classe al link come in questo modo
1 2 3 |
<a href="https://www.manuelmarangoni.it/sir-bit/wp-content/uploads/2011/03/jquery-lightbox-noir.jpg" class="lightbox"> <img src="https://www.manuelmarangoni.it/sir-bit/wp-content/uploads/2011/03/jquery-lightbox-noir-300x200.jpg" alt="" title="jquery lightbox - noir" width="300" height="200" /> </a> |
a me non funziona, ho seguito tutto per filo e per segno ma continua a caricarmi l’immagine in un’altra pagina.. non è che devo mettere qualcosa nel css per la .lightbox?
@Dietrich
Il css viene già dato in “dotazione” quando scarichi il pacchetto del jquery lightbox che trovi linkato sopra e serve più che altro per formattare l’aspetto dell’immagine che appare a pieno schermo. Se lo lasci così com’è e segui le istruzioni dell’articolo dovrebbe funzionare a dovere.
Se l’immagine continua a caricarsi in un’altra pagina, probabilmente è perché non prende il jquery (immagino che tu abbia un target=”blank” nel link dell’immagine).
Il problema può essere dovuto a:
– hai associato la classe “lightbox” al tag “img” invece che al tag “a”
– il file jquery non viene caricato (per esempio hai sbagliato il link di inclusione di jquery.js); per vederlo potresti controllare la console degli errori del tuo browser (in Firefox è nel menu “Strumenti -> Sviluppo web -> Console degli errori”): se ti dà una qualche funzione mancante, forse è perché devi sistemare il link di inclusione