Mixing JQuery Lightbox with Innerfade – Your own JQuery Slideshow album

Did you ever know how simple is it to make a slideshow photo album of your own with JQuery? I tried one by mixing JQuery Lightbox plugin with Innerfade. Some of the best things in life are free and this one’s simple too!

Here goes the code:

Step 1: Download lightbox and innerfade. Place the “jquery.lightbox-0.5.js” and “jquery.innerfade.js” script files into your “js” folder along with other files like “jquery-1.3.1.js”.

Step 2: Copy the CSS stylesheet for lightbox into your ‘css’ folder or in the default theme directory, if you are using WordPress. In WordPress, you shall find the default theme stylesheet, ’style.css’ file at this location.

Step 3: Create the html file for your album. Name it like ‘album.html’. Include the JQuery, lightbox and innerfade script files and any other required stylesheet files as shown below:

<html>
<head>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.innerfade.js"></script>
 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Step 4: Create your own script file for the album as ‘album.js’. You must include it in your ‘album.html’ file as shown below:

<html>
<head>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.innerfade.js"></script>
 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/album.js"></script>

Step 5: Place the following code into your ‘album.js’ file to set up the JQuery calls that need to be invoked on page load.

$(document).ready(
	function(){
		$('#images').innerfade({
		animationtype: 'slide',  //You can change it to 'fade' to
//create a fade animation in your slideshow
		speed: 750,
		timeout: 2000,
		type: 'sequence',
		containerheight: '75px'
	});

	$('#gallery a').lightBox();
});

The above code defines the options for innerfade like the speed of image swap and animation type. It is important to note that there are two div layers with id=”gallery” and “images”. We apply the lightbox effect to the gallery while invoking the innerfade effect on the images. Don’t worry if its confusing. You will understand it better after we see the next step.

Step 6: Add the following stylesheet code into your default ’style.css’ file. Or you can create your custom ‘gallery.css’ file and link it in the header section of your ‘album.html’ file as follows:

<html>
<head>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/gallery.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.innerfade.js"></script>
 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/album.js"></script>

The following code goes into the ‘gallery.css’ file:

#gallery {	}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	border: 0px;
}
#gallery ul a:hover img {
		color: #fff;
}
#gallery ul a:hover { color: #fff; }

Step 7: Add the following final piece of code to the body of your html file (album.html):

<div id="gallery">
    <ul id="images">
      <li><a href="Winter.jpg" title="Winter">
     <img src="Winter.jpg" width="150" height="150" alt="" /></a>
    </li>
    <li><a href="Sunset.jpg" title="Sunset">
      <img src="Sunset.jpg" width="150" height="150" alt="" /></a>
    </li>
    <li><a href="Water lilies.jpg" title="Water Lilies">
    <img src="Water lilies.jpg" width="150" height="150" alt="" /></a>
    </li>
    </ul>
</div>

The above piece of code creates two div layers. The gallery layer to which the lightbox effect shall be added and the images layer (in fact a ul element) to which the innerfade effect shall be applied to create an impression of a slideshow.

Take care to note where the images are stored. You must refer to the images correctly in the anchor elements.

Thats it! Your own album with slideshow effect is ready! If you click on the slideshow, you can view the images in full size with lightbox effect. Have fun!

Demo: You can try a demo of the slideshow described here.

Share and Enjoy:

This entry was posted on Friday, February 27th, 2009 at 3:38 am and is filed under Web Designing. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Comments

There are 7 Comments

Sicarú says:

March 13, 2009 at 11:02 am

Hey! sorry… but, where do I can download “jquery.lightbox-0.5.js” and “jquery.innerfade.js”?
Should I search in the web?

Thanks for U reply.
Greetings
Madan Revoor says:

March 14, 2009 at 5:23 am

You can download lightbox at http://leandrovieira.com/projects/jquery/lightbox/

and innerfade at http://medienfreunde.com/lab/innerfade/ Enjoy!
Fylalo says:

March 19, 2009 at 6:35 am

Thankzz,

I will try it and think too used it voor my web(under constr.)

Greetz,
F.
Rahat says:

April 18, 2009 at 9:29 am

What about showing 100+ images on a slower network connection?
In that case people will see slideshow of all the half downloaded for quit a long time…!
Sowmya says:

May 13, 2009 at 6:10 am

Really nice work, I like it.
PraDz says:

October 15, 2009 at 4:05 am

hey

its nice and is there anyway that i could work on the timer based slideshow of the lightbox. i have already implemented the slideshow which works fine with previous and net buttons.
indialike.com says:

December 8, 2009 at 7:17 am

This is really very good Site… Thanks

Post Comments

- OTHER POSTS -

Name	(required)
Mail	(required)
Website