Giuba's Blog: JAVASCRIPT - Come migrare da lighbox a colorbox

Hai la necessità di migrare dalla famosa lightbox per passare alla più evoluta e versatile colorbox nel modo più indolore possibile? Bene, ora illustro quello che fa per te!

Come già sai la lightbox è attivabile aggiungendo l'attributo rel="lightbox" (link singolo) o rel="lightbox[group]" (gruppo di immagini in più link) al tag "<a></a>" che punta ad una immagine, mentre per attivare la colorbox quello che ci viene più comodo è inizializzarla sugli elementi che vogliamo.

Veniamo a noi: se hai diversi link che sfruttano già la lightbox ecco lo script di inizializzazione che ti serve per attivare la colorbox senza cambiare nulla di quello già presente per lightbox!
Non do niente per scontato quindi facciamo un passo indietro e prima di tutto elimina le righe di codice che fanno riferimento a lightbox dal tuo sito:

<script type="text/javascript" src="tuopercorso/prototype.js"></script>
<script type="text/javascript" src="tuopercorso/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="tuopercorso/lightbox.js"></script>
<link href="tuopercorso/lightbox.css" rel="stylesheet" type="text/css" />

poi aggiungi quelle per colorbox facendo attenzione al percorso:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="tuopercorso/jquery.colorbox-min.js"></script>
<link media="screen" rel="stylesheet" href="tuopercorso/colorbox.css" />

Ora ti basta aggiungere questo script per attivare la Colorbox che potrai mettere all'interno del tag <head></head> per esempio sotto le righe appena aggiunte sopra.



<script type="text/JavaScript">

  $(document).ready(function(){

    var arrobjs=$('a[rel^="lightbox"]');     

    var tmpstr=""; 

    $(arrobjs).each(function(i){

      tmprel=$(arrobjs[i]).attr("rel");

      if (tmprel =="lightbox"){ //if is a single link

        $(arrobjs[i]).colorbox({rel:'nofollow'

        /*other options*/});

      }

      else{ // if are grouped links 

        if(tmpstr != $(arrobjs[i]).attr("rel") ){

          $(arrobjs[i]).colorbox({/*options*/});

        }

      }

    })

  })

  </script>

Ora hai finito! Se hai fatto tutto correttamente la colorbox funzionerà senza la necessità di cambiare niente nei contenuti e nello stesso modo della lightbox (ossia aggiungendo, ove necessario, l'attributo "rel=lightbox" )

venerdì 14 gennaio 2011

JAVASCRIPT - Come migrare da lighbox a colorbox

1 commento: