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" )
-722917.jpg)
-724351.jpg)
-725001.jpg)
-726377.jpg)
-728113.jpg)
