Jump to content
xisto Community
Sign in to follow this  
andrewsmithy

Javascript Slideshow Tutorial How to make a slideshow in JavaScript

Recommended Posts

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

Share this post


Link to post
Share on other sites

adding backgroundimage slide show.

Javascript Slideshow Tutorial

 

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

 

-shiv

Share this post


Link to post
Share on other sites

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 by games4u (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by asdftheking (see edit history)

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.