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.
