Implementing YUI Lightbox in Blogger

YUI Lightbox provides a very handy class for creating modal dialog box with background masking

This script can be used as a full-screen image gallery.

This script has been tested in IE 6, Firefox 2.0.0.4, Netscape 8.1, Mozilla 1.7 and Opera 9.21, which was created without any hacking. Another hot feature is that one can easily create a drag & drop lightbox without any extra effort.

             

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 rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container.css" /> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/dragdrop-min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container-min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/Lightbox.js"></script> 

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

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

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container.css" /> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/dragdrop-min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container-min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/Lightbox.js"></script> 

4.Now for adding the images into YUI Lightbox ,Firstly add the image

<img src="1-th.jpg" id="photo1"/>

In this ,please make note of the id tag and this is the smaller version of the image.Now link it with the lightbox using the following code.


<script type="text/javascript">
init = function(){

var dataSource = {
photo1:{url:"1.jpg", title: 'Rocks'}, /*This is the larger image*/

};
var lightbox = new YAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource: dataSource
});
}
YAHOO.util.Event.on(window, 'load', init);
</script>


5.Now save the Post/Page.


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.