HTML Image Slideshow Generator

Description

  • The following wizard generates the code for creating a image slideshow that will allow visitors to flip through a series of photos on your website. Includes controls and descriptions for your picture slideshow.

Steps

  1. Fill in the settings and name for your slideshow. Autoplay Delay controls how many seconds each image is displayed before going to the next image when "Play" is clicked.
  2. Enter the location of the images in the "Slide Image Address" box for each slide (example http://www.yoursite.com/images/photo.jpg). Next to it you can enter a short description for each image.
  3. Generate the HTML and JavaScript code for your slideshow (button at bottom)
  4. You can preview your script (button at bottom)
  5. Copy and Paste the Source Code into your HTML page

Example

Note

  • There is a version 2 of this slideshow which contains many more options. However, it also takes up much more code.
  • Version 1.6 I added "Side Show ID" which allows you to have more than one slideshow on the same page. For each new slideshow on the page, you will need to give it a unique ID (eg; slide1, slide2, slide3, etc). If you are only going to have one slideshow one the page, you can leave this setting unchanged.


Slide Show (version 1.6)
Autoplay Delay: Seconds
Slide Show Title:
Slide Show ID:
(change ID if multiple slideshows are on one page)
Slide Show Image Entries
Slide Image Address Slide Text Description



Source Code
JavaScript

Comments

June 30, 2010 - 8:40am — exaltadonai

First, thank you for the slideshow. It's just what we were looking for.
How can we change the height and width the cell where the description is displayed? Some of our descriptions are lengthy.

June 30, 2010 - 1:00pm — ricocheting

If you have many long descriptions, you might be better off using the more advanced slideshow which has the descriptions in plain text (which is much more customizable).

You can also change the font size/style on this slideshow to make the text not appear so big. You change the:
<select name="slide" onChange="rotate(this.selectedIndex);">
to something like
<select name="slide" onChange="rotate(this.selectedIndex);" style="font:10px Arial;">

July 9, 2010 - 6:28am — Anonymous

Thank you very much. I've spend about 5 hours looking for something simple as this (and in a simple code which I can modify a little for my needs).
I was wondering if it was possible to enable an autostart (when the page is loaded), without clicking the start button.
Thanks again!

December 26, 2010 - 7:36pm — Anonymous

I was having problems getting the above autoplay-on-load feature working when I used multiple slideshows on the same page. I found the issue was related to the "Slide Show ID." There were 2 places in the code I needed to specify the name of the form/slideshow.

Here is what I came up with:
window.onload=function(){document.ff_NAMEOFMYSLIDESHOW.fa.value="Stop";auto_NAMEOFMYSLIDESHOW();}

In BOLD are the critical missing elements if you are using a custom slideshow ID (other than the default "slide1" one).

Just wanted to share my results. Thank you again!

July 13, 2010 - 10:40am — Anonymous

Is there any way that the photos from the slide show be made to resize to fit screen? I have some portrait and some landscape. I can force a fixed size but that distorts my image. If I don't put in the size control then my images are too large and the controls are off screen.

Can you help?

July 14, 2010 - 6:34pm — ricocheting

You can stick a width="640" property on the <img> and NOT put the height tag. That generally allows the height to automatically adjust so the image won't distort.

However, for the best results you should edit/resize the images themselves before you upload them to your website.

July 22, 2010 - 4:15pm — renratpiz

If I wanted to change the background color of the slideshow, could I? Currently, it appears transparent, allowing the background of the website to show through. How would I go about setting the slideshow's background color to something different?

July 23, 2010 - 12:42am — ricocheting

If you want to change the background color of the entire thing, you can edit the table
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;">
and update it to the hex color value to the color you want.
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;background:#C0C0C0;">

August 19, 2010 - 12:50pm — ricocheting

If you want to set a static width and height, you can edit the table
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;">
and update it to the width and height you want.
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;" width="350" height="600">

February 13, 2011 - 9:58am — Anonymous

Hi great code, works very well and I appreciate the work and glad to give you the link.

I would like to have the show stop at the end of the images instead of a continuous loop.

Have a great Day!

February 13, 2011 - 3:20pm — ricocheting

Change the autoplay function from something like (the 5000 number might be different depending on Autoplay Delay entered):

function auto() {
if(document.ff.fa.value == "Stop"){
rotate(++x);setTimeout("auto()", 5000);}}
to
function auto() {
if(document.ff.fa.value == "Stop" && x!=document.ff.slide.length-1){
rotate(++x);setTimeout("auto()", 5000);}
else{document.ff.fa.value="Start"}}

February 21, 2011 - 4:18pm — Anonymous

I would like to remove the play buttons and the slide selector. How would I do that without messing up the sideshow from running?

[edit]
Is there a way to simply hide the Slide Selector so its function is still there, but it won't be shown on the webpage?

I ask because i need to put multiple slides on one page and Slideshow v2.0 doesn't allow that

February 22, 2011 - 8:29pm — ricocheting

You can remove the play/stop/next/last/prev buttons if you want. However the Slide Selector is required as that is where the actual slide URLs are stored so it can't be removed-removed.

However, you had an interesting idea. You can hide the table row that contains selector. Change:
<tr><td align="center" style="border:1px black solid;">to
<tr><td align="center" style="display:none;">
I tried it and it works in IE8, FF3.6, Chrome6.

July 26, 2011 - 2:49pm — Anonymous

Can you give specific instructions as to what to remove from the code to get rid of the play/stop/next/last/prev buttons?

July 26, 2011 - 3:45pm — ricocheting

To remove the play/stop/next/last/prev buttons, delete the following:

<tr><td align="center" style="border:1px black solid;">
<input type="button" onclick="rotate(0);" value="ll&lt;&lt;" title="Jump to beginning" />
<input type="button" onclick="rotate(x-1);" value="&lt;&lt;" title="Last Picture" />
<input type="button" name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Start" title="Autoplay" style="width:75px;" />
<input type="button" onclick="rotate(x+1);" value="&gt;&gt;" title="Next Picture" />
<input type="button" onclick="rotate(this.form.slide.length-1);" value="&gt;&gt;ll" title="Jump to end" />
</td></tr>

May 16, 2011 - 7:35pm — Anonymous

What would I need to do in order to use the buttons in image mapping.
Like, say I made two images of buttons (<< & >>) and wanted them to act as back and forward instead of the buttons it creates, what would I need to do?

May 18, 2011 - 12:56pm — ricocheting

replace the four buttons with:

<a href="#" onclick="rotate(0);return false;"><img src="start.jpg"></a>
<a href="#" onclick="rotate(x-1);return false;"><img src="prev.jpg"></a>

<a href="#" onclick="rotate(x+1);return false;"><img src="next.jpg"></a>
<a href="#" onclick="rotate(this.form.slide.length-1);return false;"><img src="end.jpg"></a>
replacing the images with your own of course.

May 28, 2011 - 5:28pm — Anonymous

Mine keeps aligning to the left of my screen? How do I center it?

May 29, 2011 - 8:15pm — ricocheting

The table the slideshow is in can be aligned to the center. Change:
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;">to:
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;" align="center">

June 10, 2011 - 9:34pm — Anonymous

I'm getting this error when I generate the code, but there are only letters in my ID. I've taken out spaces and everything. Lil' help.
[edit] I found out the issue was a letter can't be capitalized. Thanks.

June 12, 2011 - 2:12am — Anonymous

is there any way the slideshow could NOT loop back to the first image when the user clicks all the way to the end, like the "next" button would not do anything once theyve reached the end so it just stops.

June 12, 2011 - 12:58pm — ricocheting

to prevent it from rolling over and starting again, change:

x=num%fs.length;
if(x<0) x=fs.length-1;
to:
x=num;
if(x>=fs.length) x=fs.length-1;
if(x<0) x=0;

November 27, 2011 - 8:35pm — Anonymous

I really love your slideshow. It's exactly what I need for a special application. It seems to only handle 0-9 slides-need to increase to 16. What would I need to do to change that? Thanks.

November 28, 2011 - 11:09am — ricocheting

Down near the bottom there should be a list stores the slides:

<option value="http://ricocheting.com/slideshow_thumb_alpine.jpg" selected>Olympic National Park</option>
<option value="http://ricocheting.com/slideshow_thumb_rainier.jpg">Mount Rainier National Park</option>
<option value="http://ricocheting.com/slideshow_thumb_teton.jpg">Teton National Park</option>
<option value="http://ricocheting.com/slideshow_thumb_jasper.jpg">Jasper National Park</option>

The first part contains the slide image URL then the second part contains the slide description. Just keep adding as many more as you need.

April 30, 2012 - 10:24am — Anonymous

So first off I would like to say that this is an excellent tool and I love how simple it is Great job!

Now, I am trying to make it so that if I click on an image outside of the entire form, but its still on the same page as the slideshow that when it is clicked the slideshow will jump to that image. How could I do that? I'm thinking that it could be a link associated with the options values somehow. Please Help me out!

May 1, 2012 - 10:36am — ricocheting

You can create links to jump to a specific slide like:
<a href="javascript:rotate(2);">Jump to slide</a>Where 2 in is the slide number (would be the third slide in this case as it starts from zero: 0,1,2)

May 19, 2013 - 8:34pm — Byron K

Hi there, I don't know if folks are still commenting on this 2 years later but I wanted to thank you for this. This is the only site I've found that I understand. I know just the basics of HTML and using this generator worked great for me. The only thing I would ask is if the pictures can be made change in a specific order. For some reason the slideshow starts with picture #2 instead of #1. Kind of weird, but not something to really get upset about. Would just like to see a particular picture pop up first, then the rest. Again, thanks for this tool. I got it bookmarked now!

May 19, 2013 - 11:16pm — ricocheting

By default it should show slide #1 and the clicking "next" should change it to slide #2, then #3 and so on in order. The only reason I can think of that it wouldn't do that is if the slide <option> tags got changed, but the default slide in the <img src="slideshow_first_thumb.jpg" name="show">wasn't changed to reflect the new values/order.

June 12, 2013 - 6:26pm — Kate

This is super helpful, thank you. Is there a way to make each slide a button? So if someone clicked on it, it would go to a page?