Javascript Slideshow Tutorial How to make a slideshow in JavaScript

andrewsmithy · March 19, 2005

JavaScript Slideshow Tutorial

I'm going to show you how to make a impressive JavaScript slideshow. First, you're probably asking: why would I want to make a slideshow in JavaScript? There are a number of reasons. First, you don't have to build a new HTML page for each picture. Secondly, the page will load much faster because the of the compactness of the page.

Ok let's get started with this example.

First we'll add a <script> tag in the <head> of our HTML document. In that script tag we will build the following:

      first = 1;      last = 4;      current = 1;                  function nextPicture() {          // Hide current picture          object = document.getElementById('slide' + current);          object.style.display = 'none';                          // Show next picture, if last, loop back to front          if (current == last) { current = 1; }          else { current++ }          object = document.getElementById('slide' + current);          object.style.display = 'block';       }       function previousPicture() {          // Hide current picture          object = document.getElementById('slide' + current);          object.style.display = 'none';                          if (current == first) { current = last; }          else { current--; }          object = document.getElementById('slide' + current);          object.style.display = 'block';      }

First, I want you to look at the variables. first describes the first picture id, which is 1; last defines the last picture, and current holds the index of the current picture. The function nextPicture() hides the currently displayed picture, and displays the next picture using CSS controls. The function previousPicture() is almost exactly the same as nextPicture() except that it travels back one picture. Notice that current variable holds the current picture index. We are going to make this page styled through CSS. Here is my CSS code. you can change this to whatever you want. Put this in the <style> tag of your <head> tag.

            .slideShow {                background-color: #ebebeb;                text-align: center;                margin-bottom: 10px;                padding: 5px;            }            .slides {                position: relative;                z-index: 1;                display: none;            }            .setTitle, .slideTitle {                font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;            }            .setTitle {                color: #995a01;                font-size: 14px;                font-weight: bold;                }            .slideTitle {                color: #666666;                font-size: 12px;            }            .controls {                position: relative;                z-index: 10;            }            #slide1 {                display: block;            }                        img {                border: outset 1px #999999;            }

Ok, now we are going to put our pictures in our page. We do this through standard HTML. I'll explain this part after we go over the code.

        <div class="slideShow">            <div class="setTitle">Jaguars Track and Field Photos</div>                        <div id="slide1" class="slides">                <div class="slideTitle">Picture 01</div>                <img src="pic01.jpg" height="300" width="400" border="0" />            </div>            <div id="slide2" class="slides">                <div class="slideTitle">Picture 02</div>                <img src="pic02.jpg" height="300" width="400" border="0" />            </div>            <div class="controls">                <a href="javascript:previousPicture()" style="margin: 10px;">Ť Previous</a>                <a href="javascript:nextPicture()" style="margin: 10px;">Next ť</a>            </div>        </div>

This code goes in the <body> tag. I just put two slides on here, but you can easily add more. Here is the format for adding more slides. You place another <div> inside of the <div class="slideShow"> like this:

<div id="slideShow">...<div id="slide10">     <div class="slideTitle">Your Slide Title</div>     <img src="pic10.jpg" height="600" width="430" border="0" /></div>....</div>

Ok, when all of this is put together, you have a quite nice Javascript-enhanced slideshow! Here is the code for the whole page. Remember to edit the variable last to be the same as your last slide number.

<!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&%2334; xml:lang="en" lang="en">    <head>        <title>Slideshow</title>        <script language="JavaScript" type="text/javascript">            //<!--            //<![CDATA[                        first = 1;            last = 4;            current = 1;                        function nextPicture() {                // Hide current picture                object = document.getElementById('slide' + current);                object.style.display = 'none';                                // Show next picture, if last, loop back to front                if (current == last) { current = 1; }                else { current++ }                object = document.getElementById('slide' + current);                object.style.display = 'block';            }            function previousPicture() {                // Hide current picture                object = document.getElementById('slide' + current);                object.style.display = 'none';                                if (current == first) { current = last; }                else { current--; }                object = document.getElementById('slide' + current);                object.style.display = 'block';            }            //]]>            // -->        </script>        <style type="text/css">        <!--            .slideShow {                background-color: #ebebeb;                text-align: center;                margin-bottom: 10px;                padding: 5px;            }            .slides {                position: relative;                z-index: 1;                display: none;            }            .setTitle, .slideTitle {                font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;            }            .setTitle {                color: #995a01;                font-size: 14px;                font-weight: bold;                }            .slideTitle {                color: #666666;                font-size: 12px;            }            .controls {                position: relative;                z-index: 10;            }            #slide1 {                display: block;            }                        img {                border: outset 1px #999999;            }        -->        </style>    </head>    <body>        <div class="slideShow">            <div class="setTitle">Your Title</div>                        <div id="slide1" class="slides">                <div class="slideTitle">Picture 01</div>                <img src="pic01.jpg" height="300" width="400" border="0" />            </div>            <div id="slide2" class="slides">                <div class="slideTitle">Picture 02</div>                <img src="pic02.jpg" height="300" width="400" border="0" />            </div>            <div id="slide3" class="slides">                <div class="slideTitle">Picture 03</div>                <img src="pic03.jpg" height="300" width="400" border="0" />            </div>            <div id="slide4" class="slides">                <div class="slideTitle">Picture 04</div>                <img src="pic04.jpg" height="300" width="400" border="0" />            </div>            <div class="controls">                <a href="javascript:previousPicture()" style="margin: 10px;">Ť Previous</a>                <a href="javascript:nextPicture()" style="margin: 10px;">Next ť</a>            </div>        </div>    </body></html>

There you go! If you have any problems, suggestions, or questions please reply to this post. If you like this code, please rate me! Thanks

iGuest · December 29, 2007

adding backgroundimage slide show.

Javascript Slideshow Tutorial

What would be the coding of adding backgroundimage slide show in javascript?

-shiv

karlosvalencia · January 5, 2008

This is actually pretty cool. Tested it and works like a charm. Is there any way in java to protect the pictures so they cant be downloaded using right-click once they're displayed?

games4u · April 30, 2008

adding backgroundimage slide show.

Javascript Slideshow Tutorial

What would be the coding of adding backgroundimage slide show in javascript?

-shiv

The easiest way of background image slideshow is by assigning different backgrounds to different <div> tags.

So the following part of above code:

<div id="slideShow">
...
<div id="slide10">
Some Text Here...
</div>
....
</div>

can be changed to:

<div id="slideShow">
...
<div id="slide10" style="background-image:url(bg_image_10.bmp)">
Some Text Here...
</div>
....
</div>

The style attribute can be given for all <div> tags. And if needed the text in all <div> tags can be same - this creates a background changing effect.

I hope that solved your problem :lol:

Edited April 30, 2008 by games4u (see edit history)

ultranet · September 26, 2008

Where I can get the source code of this example?

agdurrette · October 29, 2008

Dooood Thats sooo cool love it thanks so muchhow can i make it auto-play/play thanks

minimcmonkey · November 4, 2008

This is actually pretty cool. Tested it and works like a charm. Is there any way in java to protect the pictures so they cant be downloaded using right-click once they're displayed?

No, there is absolutely no way to stop a persistent person from getting your images.you can disable the context menu, and call alerts on right click etc, but there are plenty of other ways of getting the image.
I have seen people position transparencies over their images, so you download a blank image when you try and right click it to save it.
Unfortunately, the browser needs the URL of the image to show it, for which reason, there is no way of protecting it.

asdftheking · November 16, 2008

Dooood Thats sooo cool love it thanks so much
how can i make it auto-play/play

thanks

As soon as I set this up the first thing I did was make it autoplay, it just makes sense. If you haven't already figured it out or given up, here's how it goes:

add two elements:

object.style.display = 'none';

// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
setTimeout(nextPicture, 2500); //NEW LINE in the end of nextPicture function
} //a self repeating call at a delay of 2.5 secs
//adjust the seconds to your liking

linenums:0'>function nextPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; // Show next picture, if last, loop back to front if (current == last) { current = 1; } else { current++ } object = document.getElementById('slide' + current); object.style.display = 'block'; setTimeout(nextPicture, 2500); //NEW LINE in the end of nextPicture function } //a self repeating call at a delay of 2.5 secs //adjust the seconds to your liking(the line which needs to be added should be 24.)

then in line 79 change <body> to:
(it will be 78 if you haven't already made the first change)

<body onload="setTimeout(nextPicture, 2500);">

I'm sure within a day or two I'll get bored with this and make the pictures fade in and out to black and/or white. I'll probably give a how to on that as well.
Let me know if this works for you!
Edited November 16, 2008 by asdftheking (see edit history)

iGuest · April 22, 2009

Start and STOPJavascript Slideshow Tutorial

It is nice that the slide show will start playing when loaded but what if you want to stop it and use the forward and backwards buttons? How about a pause or stop button? Any ideas on code for that?

Thanks

-question by brian

iGuest · April 28, 2009

Slide Show JavaScript with Text ControlsJavascript Slideshow Tutorial

I need a JavaScript slideshow class customizable for text controlsInstead of thumbnails. I know I have seen them before, but I can't seemTo find one now. Anybody know of a open-source script that would doSomething like this. The highlighted text and slide auto scrolls, butCan be selected onMouseOver and clicking navigates to a specified URL. Is this something you have already coded or would be willing to quote?

-question by Jim Hollomon

iGuest · July 7, 2009

AwesomeJavascript Slideshow Tutorial

Thanks so much for the code it's awesome!/txtmngr/images/smileys/smiley1.Gif

It seems like theAuto-play function is only working for the first couple of pictures,And stops at pic2. Do I have my code in the wrong place?

Thanks,

Jen

http://forums.xisto.com/no_longer_exists/

iGuest · July 14, 2009

BrilliantJavascript Slideshow Tutorial

Thank you so much-this is totally brilliant and thanks for the auto-play version.I don't really know Java so thanks for explaining it piece by piece and them putting it together like I said Brilliant!

-reply by lordofsarcasm

iGuest · July 16, 2009

Javascript Slideshow TutorialJavascript Slideshow Tutorial

This works great and cool.

One thing I found that, when I check on the next button twice or thrice the speed of the next or back slide increases and increases it keeps increases the keeps increasing.I have no control on the slide show.Is there a way to put pause or play button and how.

Thanks shan

-reply by Java learner

iGuest · October 8, 2009

Multiple slideshows on one pageJavascript Slideshow Tutorial

First of all, thank you for doing this, it is extremely useful and straight forward, the best html java tutorial I've seen so far. Great Work. Is there anyway of including more Slideshows than one, though? When I try it, the second one browses the first one. And they have the same size?

Is there any solution to thisThank you again

-reply by Martin Samuelson

iGuest · November 5, 2009

How to add a small icon photo spread Javascript Slideshow TutorialThis is great! I was curious, though, what it would take to add a miniature photo spreadsheet to one side of this slide show? I have several bunches of photos that I wanted to create a small spreadsheet of. When the user clicked one of the photos, an enlarged photo would appear to the right or left of this small spreadsheet. Is that possible?

Sign In

Javascript Slideshow Tutorial How to make a slideshow in JavaScript

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information