Tutorial @ Fuda Design

Well, maybe most of you guys wondering on how integrate jQuery Colorbox Plugins into your Blogger. jQuery Colorbox Plugins are image view plugins that makes your blog looks more interactive and more presentable.

You could download the full package Colorbox V1.3.9. This will have the full example and the plugin scripts that you could integrate into your site, if you hosted you blog or site personally.

In this tutorial, I will show you how to integrate with Blogger.

Step 1

Login to your Blogger Dahsboard, and go to Design, then go to Edit HTML then click at Expand Widget Templates, the reason is that you will have the full access to your template scripts.


Step 2

Copy and paste these codes into your template just above </head> the tag.

<link href='http://dl.getdropbox.com/u/2863383/js/colorbox132/example5/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='colorbox']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:650, innerHeight:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});
});
</script> 

Step 3

Now, to add the function to your image just add class="colorbox" to your <a> tag of your image. Eample:

<a href="http://2.bp.blogspot.com/_PwzardmADgg/THfnk8LBQGI/AAAAAAAAAP0/eufdMj6J1XQ/s1600/Safari 2.png" imageanchor="1" class="wptut" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://2.bp.blogspot.com/_PwzardmADgg/THfnk8LBQGI/AAAAAAAAAP0/eufdMj6J1XQ/s400/Safari 2.png" width="197" /></a>

Adding Single jQuery Colorbox Popup

It's done, you will have a set of image gallery popup. To add individual image Colorbox popup. In your post editor, select Edit HTML to view the source codes, and add this customized scripts to suite your requirement.

<script type="text/javascript">
$(function(){ $('.classname').colorbox(); });
</script>

Adding jQuery Colorbox Image Gallery

You need to add rel="galleryname" to your image and add this line of codes at the end of your post.

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