ColorBox

colorbox jsLa particolarità di questo plugin lightbox per jQuery sta nel suo altissimo grado di personalizzazione.

Versione: 1.3.6 (13/01/10)
Sito ufficiale: colorpowered.com/colorbox
Richiede: jQuery (1.3 o 1.4)
Download: 83,9 KB (js + css) a cui aggiungere le immagini del theme

 

Installazione

Dopo aver scaricato e scompattato sul vostro sito ColorBox e jQuery è necessario includere il seguente codice all'interno del tag <head> della vs pagina:

<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="colorbox/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>

e verificare il corretto posizionamento dei file immagini e css. Per ogni immagine da zoommare basterà aggiungere l'attributo rel in questo modo:

<a href="big_01.jpg" rel="demo"><img src="small_01.jpg" /></a>
<a href="big_02.jpg" rel="demo"><img src="small_02.jpg" /></a>

ed infine chiamare, sempre all'interno di <head>:

<script type="text/javascript">
  $(document).ready(function(){
    $("a[rel='demo']").colorbox();
  });
</script>


Validazione HTML5 e attributo rel

ATTENZIONE. Per permettere alla vostra pagina di passare la validazione HTML5 (http://validator.w3.org), oltre alla correttezza del vostro codice, è necessario appoggiarsi a JQuery 1.4.4 ed utilizzare ColorBox 1.3.16 come segue:

Per ogni immagine utilizzare l'attributo class e data-lightbox al posto di rel in questo modo:

<a href="big_01.jpg" class="link_colorbox" data-lightbox='{"group":"demo"}'><img ...></a>
<a href="big_02.jpg" class="link_colorbox" data-lightbox='{"group":"demo"}'><img ...></a>

e chiamare, sempre all'interno di <head>:

<script type="text/javascript">
  $(document).ready(function(){
    $(".link_colorbox").each(function() {
      var obj = $(this);
      var obj_settings = {}
      if(obj.data("lightbox")){
        obj_settings = obj.data("lightbox");
        obj_settings.rel = obj.data("lightbox").group;
      }
      obj.colorbox(obj_settings);
    })
  });
</script>

 

Demo

Esempio di galleria fotografica realizzata con Shadowbox.js nella configurazione base standalone. Moltissime le possibilità di personalizzazione: le trovate tutte sul sito dell'autore.

Provate la versione valid HTML5.

 

Per commenti, scriveteci.