Timothy van Sas is very good in webdesign, xhtml, css and smooth dancing

RSS FeedSimple slideshow with jQuery

You want to show your visitors the most recent work you’ve created? You want to pimp your potfolio with a slideshow which has only a few lines of code? You came to the right place… not convinced yet? Well check out the example first.

Ok, in an eggshell:

• 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

		<div class="slideshow">
			<ul class="recentlist">
				<li><a class="current" href="#slide1">1</a></li>
				<li><a href="#slide2">2</a></li>
				<li><a href="#slide3">3</a></li>
			</ul>
			<img id="slide1" src="slide-1.gif" alt="Image 1 slideshow" />
			<img id="slide2" src="slide-2.gif" alt="Image 2 slideshow" />
			<img id="slide3" src="slide-3.gif" alt="Image 3 slideshow" />
		</div>
		

Take a look at an example Check all articles