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: 

KeyDefaultDescription
transition"elastic"The transition type. Can be set to "elastic", "fade", or "none".
speed350Sets the speed of the fade and elastic transitions, in milliseconds.
hreffalseThis 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"})
titlefalseThis can be used as an anchor title alternative for ColorBox.
relfalseThis 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.
widthfalseSet a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500
heightfalseSet a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500
innerWidthfalseThis is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500
innerHeightfalseThis is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500
initialWidth300Set the initial width, prior to any content being loaded.
initialHeight100Set the initial height, prior to any content being loaded.
maxWidthfalseSet a maximum width for loaded content. Example: "100%", 500, "500px"
maxHeightfalseSet a maximum height for loaded content. Example: "100%", 500, "500px"
scalePhotostrueIf 'true' and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, ColorBox will scale photos to fit within the those values.
scrollingtrueIf '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.
iframefalseIf 'true' specifies that content should be displayed in an iFrame.
inlinefalseIf 'true' a jQuery selector can be used to display content from the current page. Example:
$("#inline").colorbox({inline:true, href:"#myForm"});
htmlfalseThis 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>'});
photofalseIf 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')
opacity0.85The overlay opacity level. Range: 0 to 1.
openfalseIf true, the lightbox will automatically open with no input from the visitor.
returnFocustrueIf true, focus will be returned when ColorBox exits to the element it was launched from.
fastIframetrueIf false the loading graphic removal and onComplete event will be delayed until iframe contents have completely loaded.
preloadingtrueAllows 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.
overlayClosetrueIf false, disables closing ColorBox by clicking on the background overlay.
escKeytrueIf false, will disable closing colorbox on esc key press.
arrowKeytrueIf false, will disable the left and right arrow keys from navigating between the items in a group.
looptrueIf false, will disable the ability to loop back to the beginning of the group when on the last element.
slideshowfalseIf true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed2500Sets the speed of the slideshow, in milliseconds.
slideshowAutotrueIf 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

Post a Comment
Unknown said...

how can i set iframe parameters, such as width and height, actually i want to show a portion of the extrenal page, so how can i?

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

Unknown said...

thank u very much for ur reply!
i am newbie and dont know javascript, so please would u post an example which only show Google logo in www.Google.com

bro u got an awesome blog wid some awesome content but its not user friendly bcuz of template i mean its card for me to see scripts and all but still content is amazing :)

Thanks for the compliment

As per your suggestion I have changed the Syntax Highlighter and made it easier to see and copy code

brother your DropBox files are not working .... i mean iam using sexy box and it's not working!!