COLORBOX : A perfect Lightbox for Sites

Colorbox


It has been a while since I posted something over Blogspot , actaully I was working over my blog template design and tweaking over its loading time as well as some other codes and widgets which were making it load slower.
I was looking for a tool which can give vistor a  great browsing user experience over the site.


After searching over google I shortlisted three tools ,Colorbox
Lightview and Lightbox out of these 3 after working and testing it over my template I found success in 2 Jquery enabled Lightwight Lightboxes  i.e lightbox2 and Colorbox. Out of both I like colorbox , as its easy and very much flexible.


Now if you are wondering what I'm talking about , then click over my profile picture or Header picture , you will get a image in a BOX not in the other page. So the main point is to do work on the same page.
The good thing is it doesn't reloads your page again , which is quite annoying at times when we have slow internet access.


More over it give you a better way to  browse images and you can also do a slideshow with this Colorbox and even can add external blogger link or video embedding etc and its very easy nothing to much.
So the main advantage of this is on site loading  which is faster, content access gets easier, bandwidth is consumed less.


I have hosted the scripts over my google site page so no issue of slow google performance.To do all the Above I will show you step by step implementation.


Step 1 : Goto Blogger  Dashboard ---> click " Design".
Step 2 : Click over " Edit HTML".
Step 3 : Click on "Download Full template" To be on the safer side if  any error comes,so it can reversed.
Step 4 : Check "Expand Widget Templates".
Step 5 : Search for </head> tag in your blog template
Step 6 : Copy the  Below code above </head> tag.

<link href='http://sites.google.com/site/vivekchamoli/home/test-for-scripts/colorbox.css' media='screen' rel='stylesheet'/> 

<script src='http://sites.google.com/site/vivekchamoli/home/test-for-scripts/jquery.min.js.txt' type='text/javascript'></script> 


<script src='http://sites.google.com/site/vivekchamoli/home/test-for-scripts/jquery.colorbox.txt' type='text/javascript'></script> 


<script> 


$(document).ready(function(){


//Examples of how to assign the ColorBox event to elements


$("a[rel='example1']").colorbox();


$("a[rel='example2']").colorbox({transition:"fade"});


$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});


$("a[rel='example4']").colorbox({slideshow:true});


$(".example5").colorbox();


$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});


$(".example7").colorbox({width:"80%", height:"80%", iframe:true});


$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});


$(".example9").colorbox({


onOpen:function(){ alert('onOpen: colorbox is about to open'); },


onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },


onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },


onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },


onClosed:function(){ alert('onClosed: colorbox has completely closed'); }


});




//Example of preserving a JavaScript event for inline calls.


$("#click").click(function(){ 


$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");


return false;


});


});


</script>


Now I will demonstrate how you can add Image , Video , External website access within your blog post , have a look at the below examples.


Image :
Google Chrome


Code :
<a href="http://www.chromeplugins.org/wp-content/uploads/2011/02/Chrome-Browser.jpg" rel="example1" title="Google Chrome"><img style="width: 150px; height: 150px;" alt="Google Chrome" src="http://www.chromeplugins.org/wp-content/uploads/2011/02/Chrome-Browser.jpg" />
External Website :
Outside Webpage (Iframe)


Code:
<a class="example7" href="http://google.com/">Outside Webpage (Iframe)</a>


Video


Flash / Video (Iframe/Direct Link To YouTube)


Code:
<a class="example6" href="http://www.youtube.com/embed/IVenCN5-9Z8" title="Jordan Spark: Freeze">Flash / Video (Iframe/Direct Link To YouTube)</a>


These were some examples , hope you like it , do let me know if you have any queries.






P.S : All Credit goes to  Jack Moore the creator of Colorbox.

Comments

Category: , , , , , , , ,

Related Posts with Thumbnails