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.


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.

             

6 Replies to “Implementing Colorbox in Blogger”

    1. Using Ajax would be better as you would be showing only a part of the content of the external page. Here is the JavaScript for that

      $('#example').colorbox({href:'document.html div#content'});

      Here #content is the ID of part of page that needs to be displayed from the external page

Leave a Reply

Your email address will not be published. Required fields are marked *