JAVASCRIPT - How to migrate from lighbox colorbox Need to migrate from the famous
lightbox to go to the most advanced and versatile
colorbox as painlessly as possible? Well, now I explain what you need!
As you already know the lightbox is activated
adding the attribute rel = "lightbox" (single link) or
rel = "lightbox [group]" (group of pictures in more links) tagged with "\u0026lt;a> \u0026lt;/ a> "that points to an image, and to activate the colorbox what comes easiest is to initialize the elements we want.
We come to us if you have several links that already take advantage of the lightbox here is the initialization script you need to activate the colorbox without changing anything that already exists for lightbox!
do not take anything for granted and then we step back and first of all
eliminates the lines of code that refer to lightbox from your own site:
\u0026lt;script type = "text / javascript" src = "
tuopercorso / prototype.js "> \u0026lt;/ script> \u0026lt;script type="text/javascript" src="
tuopercorso /scriptaculous.js?load=effects,builder"> \u0026lt;/ script>
\u0026lt;script type = "text / javascript" src = "
tuopercorso / lightbox.js"> \u0026lt;/ script>
\u0026lt;link href = "
tuopercorso / lightbox.css" rel = "stylesheet" type = "text / css" / >
then add
colorbox for those paying attention to the trail:
\u0026lt;script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min . js "> \u0026lt;/ script> \u0026lt;script src="
tuopercorso /jquery.colorbox-min.js"> \u0026lt;/ script>
\u0026lt;link media = "screen" rel = "stylesheet" href = "
tuopercorso / colorbox.css" />
Now you just add this script to enable Colorbox that you can put inside the \u0026lt; head> \u0026lt;/ head> for example in the newly added rows above.
\u0026lt;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>
now you're done! If you did everything correctly colorbox work without the need to change anything in the contents and the lightbox in the same way (ie adding, if necessary, the attribute "
rel = lightbox
)
