Currently Browsing: Home » Simple Slideshow

Simple Slideshow

Pictures. Illustrations. Images. They say a picture is worth 1000 words. Who would prefer an essay rather than an eye-pleasing image? This post will reel you back in time to create a simple slideshow. Though this may be an old topic, it can be  a powerful tool when used correctly.

Simple Slideshow Image

View a Demo Download the Files

Let’s begin with an unordered list of images:

<ul class="ppt">
	<li><img src="ethernet.jpg" alt="Ethernet Cable"></img></li>
	<li><img src="glasses.jpg" alt="Spectacles"></img></li>
	<li><img src="pisa.jpg" alt="Leaning Tower of Pisa"></img></li>
</ul>

As you can see, each image used in the slideshow will be placed in a single list element.

Now for a short snippet of CSS:

ul.ppt {
	position: relative;
}

.ppt li {
	list-style-type: none;
	position: absolute;
	top: 0;
	left: 0;
}

.ppt img {
	border: 1px solid #e7e7e7;
	padding: 5px;
	background-color: #ececec;
}

ul.ppt and .ppt li ensure that the images are placed on top of one another. Although there will only be one image visible at a time, this placement lets us use a nice fading effect, provided by jQuery.

.ppt img sets a basic border for each image.

We can now move straight into the JavaScript. JQuery is especially simple to use when it comes to slideshows:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

To begin, we will hide all of the images except for the first.

$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

The variable cur will store the element that is currently displayed in the slideshow. Using this variable, we can create an animate() function that automates the switching the slide show:

function animate() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'last' )
		cur = $('.ppt li:first');
	else
		cur = cur.next();
	cur.fadeIn( 1000 );
}

This process is very systematic: hide the current slide, find the next slide, display it. Our code is now almost completed.

All that’s left is to call this function in a repeated interval:

$(function() {
	setInterval( "animate()", 5000 );
} );

In this example, we will use 5 seconds (5000 milliseconds).

That’s all there is to it! Here is the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery PowerPoint</title>
<style type="text/css">
ul.ppt {
	position: relative;
}

.ppt li {
	list-style-type: none;
	position: absolute;
	top: 0;
	left: 0;
}

.ppt img {
	border: 1px solid #e7e7e7;
	padding: 5px;
	background-color: #ececec;
}
</style>
</head>
<body>
<ul class="ppt">
	<li><img src="ethernet.jpg" alt="Ethernet Cable"></img></li>
	<li><img src="glasses.jpg" alt="Spectacles"></img></li>
	<li><img src="pisa.jpg" alt="Leaning Tower of Pisa"></img></li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'last' )
		cur = $('.ppt li:first');
	else
		cur = cur.next();
	cur.fadeIn( 1000 );
}

$(function() {
	setInterval( "animate()", 5000 );
} );
</script>
</body>
</html>

Thank you for reading!

Tags: ,

This entry was posted on Sunday, March 15th, 2009 at 13:37:46. 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.

30 Responses to “Simple Slideshow”

  1. Spanidis Menelaos says:

    Great and easy script! THANK YOU!

    One question: if i want to have multiple slideshows in the same page what changes are required?

  2. Greg K says:

    Well stated.
    Short and pretty descriptive.
    I appreciate.

  3. carlo says:

    small and works well. Thanks
    Carlo

  4. Mateusz says:

    very useful, thx alot :)

  5. NICOLA says:

    How can I upgrade with an ON/OFF slideshow control?

  6. D.L.M.S.A. says:

    this is great! thank you so much. from all the slides shows i saw, yours is the most simple and works very well.

  7. Ralf says:

    I spent hours looking for a SIMPLE slideshow. Your solution is exactly what I needed. Thank you!!!

  8. Jer says:

    Do you have a list of compatible/tested browsers for this? Great stuff, thanks.

  9. david v. says:

    Thank you,
    It’s very simple, and actualy works!!!
    I have a problem though, I’m shure you’ll find this very basic but I can’t find my way arround it.
    It’s the position of the slide show. I’m designing with tables and the slideshow needs to take place in the midle of a text. I just can’t get it in the right position. It stend over the text and I also can’t get it to align on the left.
    What should I do?
    Cheers.

  10. christian says:

    hello, I installed your banner on the site of one of my client, http://www.forumjuliionbike.com but I have a small problem with IE 7 / 8. After the first fade the menu disappears! The menu is created with swmenu which is a particular form of Joomla!

    I hope to get some info and solution.

    THANKS

  11. christian says:

    believe that the conflict is between SwMenuFree and jQuery

  12. Adam says:

    Hi,

    Many thanks, this is great! I was hoping to be able to use it to slide show images from a folder that new images are being saved to, and have them automatically include into the running slide show.

    I know what the iamges are going to be called (ie. 0001.JPG etc) so tried entering the a list of the strings into the code, hopeing that it would ignore them until a correctly named image shows up.

    Unfortunalty doing this just brings up a blank image (collaped border) for the alotted time. Is there a small change I can make so that it does not display an image if it is not there?

    Or another way to allow it to simple cycle thorugh all images in a folder andno have to list them all?

    Many thanks,

    Adam

    • Hey Adam,

      Your problem can be solved with a simple PHP snippet:

      <?php
      	$files = glob( 'path/to/directory/*' );
      	foreach( $files as $file )
      		echo '<li><img src="$file" alt=""></img></li>';
      ?>

      Just change the ‘path/to/directory/’ to the correct path and make sure to keep the asterix at the end.

      Place this code inside the unordered slideshow list and you should be good to go!

      Karthik

      • Patrick says:

        Hi Karthik,
        Thanks for the post and replying to Adams post. I am brand new at code, and trying to do this as you’ve suggested.

        I deleted the specific images listed in the unordered list, (all the li lines), and replaced them with your snippet above as shown (where pimage is the folder name containing the jpegs:
        <?php
        &files = glob( 'pimage/*' );
        foreach( $files as $file )
        echo '’;
        ?>

        All I’m getting is a grey block (my background is grey), and these characters:
        ‘; ?>
        (These are the last characters of the php script.)

        I assume I just have some beginner’s syntax issue, and if you can see my problem, I’d greatly appreciate it!

        Thanks,
        Patrick

  13. jules says:

    This is great! Thanks! Would you know how to make the pictures repeat at the end of the cycle and start over from the beginning?

  14. mmdl2bl says:

    David V to answer your question and anyone else how to center the slide show on the page. This is what I use in the code after the title and before the style.

    Before the style close off, I close off .

    It work for me, it took me at least 4hrs straight, and play around with all the forums on the website to figure it out myself.

    Good Luck!!!

  15. mmdl2bl says:

    I apologize why it did not show up my codes for you to use. It is a table code.
    set at 900 and align to the right, that is the only way it would center for me. and then close off the code.

  16. Adal says:

    What a clean and straightforward way to teach that lesson on slide-shows. I’m still researching one that has nice handles and then have to integrate it with WordPress. There are so many plug-in choices out there but it’s hard finding one that easily let’s you put a unique slide-show on any page you want that doesn’t force you to create plenty of posts.

  17. Lisa says:

    Hi! I know this is an older post, but I hope you get this. Your slideshow worked perfectly for me. However, I’m a baby developer and I need to know how to integrate the slideshow on a page (my content div) with text. Right now it’s on the left and covering up my text and I’d like it on the right with text wrapping around it.

    Thanks for the help and the great script!!

  18. Kamran says:

    nice and simple code.. thanks

  19. mehmet says:

    I was looking for such a simple thing for a long time. Thank you very much.

  20. Sabrina says:

    Great script, works perfectly in Firefox.. Just it refuses to work in IE..
    Is there anything I can do to fix this?..
    It just shows a small red cross

    Thanks in advance,

    Sabrina

  1. Simple Slideshow
  2. Linkit 21.3. - 22.3. | Valontuoja
  3. Slideshow With Buttons
  4. Un Slideshow jQuery Wordpress en guise de bannière
  5. My problem with JavaScript libraries

Leave a Reply

Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.