C# DotNet Solutions: Image Slider using jQuery

Tuesday, 1 January 2013

Image Slider using jQuery

I have seen a lot of users requesting for simple jQuery scripts for SlideShows.
I saw a couple of them, but the scripts assumed that the number of image tags has to be fixed beforehand.

Update: There is a updated version of this article at Simple Image SlideShow using jQuery

I thought of making an attempt at a real simple SlideShow script using jQuery.
Here’s what I came up with 5 lines of jQuery code.
The images have been added to a ‘images’ folder kept at the root.
The images has been defined in an array which can be retrieved from a server.
For simplicity sake, I have harcoded the images paths, however the script functionality
can adapt dynamically to the number of images in the array.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Slide Show with jQuery</title>
<script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
var imgs = [
'images/emo.jpg',
'images/icon068.gif',
'images/icon260.jpg'];
var cnt = imgs.length;

$(function() {
setInterval(Slider, 3000);
});

function Slider() {
$('#imageSlide').fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
});
}
</script>
</head>
<body>
<img id="imageSlide" alt="" src="" />
</body>
</html>
The code is not perfect but will give you an idea of how to extend
this sample to suit your own requirements. You can see a Live Demo here.

There are many jQuery image gallery plugins:

http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

Here's an example of using the jQuery Galleria plugin with ASP.NET MVC:

http://aspalliance.com/1864_Aspnet_mvc_image_gallery.all