Implementing Colorbox in Blogger

Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.3 through 1.6

Why you should be using ColorBox:

Supports photos, grouping, slideshow, ajax, inline, and iframed content.
Lightweight: 10KB of JavaScript.
Appearance is controlled through CSS so users can restyle the box.
Behavior settings can be over-written without altering the ColorBox javascript file.
Can be extended with callbacks & event-hooks without altering the source files.
Completely unobtrusive, options are set in the JS and require no changes to existing HTML.

Note: All the files required in this tutorial are hosted on colorpowered.com ,so if their servers go down then this tutorials Demo will also not Work

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it. 

<link media="screen" rel="stylesheet" href="http://colorpowered.com/colorbox/core/example2/colorbox.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script src="http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js"></script> 
<script> 
  $(document).ready(function(){
   //Examples of how to assign the ColorBox event to elements
   $("a[rel='WhatEverNameUlike']").colorbox();
   
  });
 </script> 

2.Go to the Post/Page you want to add ColorBox and go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<link media="screen" rel="stylesheet" href="http://colorpowered.com/colorbox/core/example2/colorbox.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script src="http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js"></script> 
<script> 
  $(document).ready(function(){
   //Examples of how to assign the ColorBox event to elements
   $("a[rel='WhatEverNameUlike']").colorbox();
   
  });
 </script>

4.Now for adding the images into Colorbox ,Firstly add the image normally using Insert Image button


Now When you see the code in the edit HTMLwindow it would be something like this

<a href=" large3.jpg"=""><img border="0" height="90" src="/small3.jpg" width="120" /></a>

Make it like this

<a href=" " rel="WhatEverNameUlike" ><img src=" " /></a>

As you can see we added only a rel="WhatEverNameUlike" tag .Make sure that the rel tag and the javascript snippet above in which the rel tag name is being called should be the same.

There are some options available to alter transitions,innerheight,etc these are: 

Key	Default	Description
transition	"elastic"	The transition type. Can be set to "elastic", "fade", or "none".
speed	350	Sets the speed of the fade and elastic transitions, in milliseconds.
href	false	This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. Example: $('h1').colorbox({href:"welcome.html"})
title	false	This can be used as an anchor title alternative for ColorBox.
rel	false	This can be used as an anchor rel alternative for ColorBox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. Example: $('#example a').colorbox({rel:'group1'}) Note: The value can also be set to 'nofollow' to disable grouping.
width	false	Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500
height	false	Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500
innerWidth	false	This is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500
innerHeight	false	This is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500
initialWidth	300	Set the initial width, prior to any content being loaded.
initialHeight	100	Set the initial height, prior to any content being loaded.
maxWidth	false	Set a maximum width for loaded content. Example: "100%", 500, "500px"
maxHeight	false	Set a maximum height for loaded content. Example: "100%", 500, "500px"
scalePhotos	true	If 'true' and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.
scrolling	true	If 'false' ColorBox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of ColorBox.
iframe	false	If 'true' specifies that content should be displayed in an iFrame.
inline	false	If 'true' a jQuery selector can be used to display content from the current page. Example: $("#inline").colorbox({inline:true, href:"#myForm"});
html	false	This allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example: $.colorbox({html:'<p>Hello</p>'});
photo	false	If true, this setting forces ColorBox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like 'photo.php' instead of 'photo.jpg', 'photo.jpg#1', or 'photo.jpg?pic=1')
opacity	0.85	The overlay opacity level. Range: 0 to 1.
open	false	If true, the lightbox will automatically open with no input from the visitor.
returnFocus	true	If true, focus will be returned when ColorBox exits to the element it was launched from.
fastIframe	true	If false the loading graphic removal and onComplete event will be delayed until iframe contents have completely loaded.
preloading	true	Allows for preloading of 'Next' and 'Previous' content in a shared relation group (same values for the 'rel' attribute), after the current content has finished loading. Set to 'false' to disable.
overlayClose	true	If false, disables closing ColorBox by clicking on the background overlay.
escKey	true	If false, will disable closing colorbox on esc key press.
arrowKey	true	If false, will disable the left and right arrow keys from navigating between the items in a group.
loop	true	If false, will disable the ability to loop back to the beginning of the group when on the last element.
slideshow	false	If true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed	2500	Sets the speed of the slideshow, in milliseconds.
slideshowAuto	true	If true, the slideshow will automatically start to play.
slideshowStart	"start slideshow"	Text for the slideshow start button.
slideshowStop	"stop slideshow"	Text for the slideshow stop button

Here is a example of modified snippet:

<script> 

$(document).ready(function(){

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


Some Example Code:

<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> 

<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>
Fade Transition</h2>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>
No Transition   fixed width and height (75% of screen size)</h2>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee1.jpg" rel="example3"  title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee2.jpg" rel="example3"  title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee3.jpg" rel="example3"  title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>
Slideshow</h2>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee1.jpg" rel="example4"  title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee2.jpg" rel="example4"  title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p>
<a href="http://colorpowered.com/colorbox/core/content/ohoopee3.jpg" rel="example4"  title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>
Other Content Types</h2>
<p>
<a class='example5' href="http://colorpowered.com/colorbox/core/content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p>
<a class='example5' href="http://colorpowered.com/colorbox/core/content/flash.html" title="Royksopp: Remind Me">Flash / Video (Ajax/Embedded)</a></p>
<p>
<a class='example6' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p>
<a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
<p>
<a class='example8' href="#">Inline HTML</a></p>

<h2>
Demonstration of using callbacks</h2>
<p>
<a class='example9' href="http://colorpowered.com/colorbox/core/content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>

5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox  or Blogspot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox