L'ultimo articolo scritto su Sir Bit risale a marzo 2014. La versione che state visitando è un archivio: le pagine sono accessibili come sempre e gli autori potrebbero rispondere ai commenti, ma non saranno inseriti dei nuovi articoli. Visita questa pagina per i dettagli.

JQuery Lightbox – fare lo zoom delle immagini

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>
Etichette
Etichette:, ,
Ultimi Commenti
  1. Dietrich

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.