jQuery Rebox è un plugin leggero e semplice da usare per realizzare foto gallery responsive in stile lightbox. jQuery Rebox è rilasciato con licenza MIT.

jQuery Rebox: gallerie fotografiche responsive in stile lightbox

jQuery Rebox: gallerie fotografiche responsive in stile lightbox

Usare jQuery Rebox

Inserire nel documento le miniature delle immagini in una lista e poi, collegare ciascuna miniatura alla versione dell’immagine a dimensioni reali.

<ul id="gallery">
<li><a href="images/1.png"><img src="images/t1.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/2.png"><img src="images/t2.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/3.png"><img src="images/t3.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/4.png"><img src="images/t4.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/5.png"><img src="images/t5.png" width="100" height="75" alt=""/></a></li>
</ul>

Le miniature possono essere formattare come si desidera senza influire sul funzionamento del plugin. Inserire un elemento style nell’intestazione del documento e applicare gli stili desiderati alle miniature.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery - Rebox | Sintesi-design.it</title>
<style>
 // Stili della gallery
 ul { list-style: none; } 
 ul li { float: left; } 
 #gallery img { 
 opacity: 0.7; 
  margin: 4px; 
  padding: 5px; 
  background-color: #eee; 
}
</style>
</head>
<body>
<h1>jQuery - Rebox</h1>
<div>
<ul id="gallery">
<li><a href="images/1.png"><img src="images/t1.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/2.png"><img src="images/t2.png" width="100" height="75" alt=""/></a></li>
</ul>
</div>
</body>
</html>

Dopo aver realizzato la galleria, scaricare una copia di jQuery (scarica) e di jQuery Rebox (sito ufficiale di jQuery Rebox). Dopo le due librerie, inserire anche un altro elemento script per le istruzioni jQuery.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery - Rebox | Sintesi-design.it</title>
<link rel="stylesheet" type="text/css" href="css/jquery-rebox.css">
<style>
// Stili della gallery
 ul { list-style: none; } 
 ul li { float: left; } 
 #gallery img { 
 opacity: 0.7; 
 margin: 4px; 
 padding: 5px; 
 background-color: #eee; 
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-rebox.js"></script>
<script>
  // Attivare il plugin
</script>
</head>
<body>
<h1>jQuery - Rebox</h1>
<div>
<ul id="gallery">
<li><a href="images/1.png"><img src="images/t1.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/2.png"><img src="images/t2.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/3.png"><img src="images/t3.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/4.png"><img src="images/t4.png" width="100" height="75" alt=""/></a></li>
<li><a href="images/5.png"><img src="images/t5.png" width="100" height="75" alt=""/></a></li>
</ul>
</div>
</body>
</html>

Nell’elemento script scrivere le istruzioni necessarie per attivare il plugin.

<script>
$(function(){
 $('#gallery').rebox({ selector: 'a' });
});
</script>

L’istruzione seleziona l’elemento #gallery e attiva il plugin con il metodo rebox() al cui interno è indicato il selettore che contiene il percorso dell’immagine da visualizzare (l’immagine a dimensione reale).

Se si vuole mostrare le immagini singolarmente si può riscrivere il codice in questo modo.

<script>
$(function(){
 $('a').rebox();
});
</script>

Con jQuery Rebox è possibile anche visualizzare video. Per maggiori informazioni sull’inserimento dei video e per la lista completa delle opzioni disponibili consultare il sito ufficiale del plugin.