13 Jun 2011
Implementing Colorbox in Blogger
Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.3 through 1.6Why 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 |
<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.
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.
Til next time,
Prayag Verma
at 08:02
