jQuery Simple slideshow

  • Show only the first image and hide the others;
  • Place a “current” class on the list-item;
  • Only exucute the function once when it has a current status.

That’s it? Yep… it’s that simple!

 

jQuery code

$(function() {
var imgWrapper = $('.slideshow > img');
// only show the first image, hide the rest
imgWrapper.hide().filter(':first').show();

$('ul.recentlist li a').click(function () {

// check if this item doesn't have class "current"
// if it has class "current" it must not execute the script again
if (this.className.indexOf('current') == -1){
imgWrapper.hide();
imgWrapper.filter(this.hash).fadeIn(500);
$('ul.recentlist li a').removeClass('current');
$(this).addClass('current');
}
return false;
});
});

We are making sure that when a list-item has the “current” class, the script won’t be executed again.

CSS code

.slideshow {
position: relative;
background: #fafafa;
width: 403px;
height: 240px;
border: 1px solid #e5e5e5;
margin-bottom: 20px;
}

.slideshow img {
position: absolute;
top: 3px;
left: 3px;
z-index: 10;
background: #fff;
}

ul.recentlist {
position: absolute;
bottom: 12px;
right: 4px;
list-style: none;
z-index: 20;
}

ul.recentlist li { display: inline; }

ul.recentlist li a, ul.recentlist li a:visited {
display: block;
float: left;
background: #e5e5e5;
padding: 4px 8px;
margin-right: 1px;
color: #000;
text-decoration: none;
cursor: pointer;
}

ul.recentlist li a:hover, ul.recentlist li a:visited:hover {
background: #666; color: #fff;
}

ul.recentlist li a.current {
background: #f00;
color: #fff;
}

In this example the unordered list is absolute, that way you can easily position the list-items above the images.

HTML code

Image 1 slideshow
Image 2 slideshow
Image 3 slideshow {/codecitation

Download: http://www.htmldrive.net/items/download/678

Leave a comment