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
- 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.
- 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.
- Generate the HTML and JavaScript code for your slideshow (button at bottom)
- You can preview your script (button at bottom)
- Copy and Paste the Source Code into your HTML page
Example
- Test example of this slideshow with Title and Controls
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.
Comments
July 9, 2010 - 6:28am — Anonymous
Great
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!
July 9, 2010 - 1:55pm — ricocheting
Answer: Start Autoplay on Page Load
window.onload=function(){document.ff.fa.value="Stop";auto();}
at the bottom of the javascript right before the closing </script>December 26, 2010 - 7:36pm — Anonymous
Fix for AutoPlay (with multiple slideshows)
Here is what I came up with:
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
Resize Photos
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.
July 14, 2010 - 6:34pm — ricocheting
Answer: Forcing a specific width
However, for the best results you should edit/resize the images themselves before you upload them to your website.
August 17, 2010 - 9:00pm — Anonymous
Question: Resize the whole slide show
Is there a way to resize the whole slide show area. I want the whole thing to be about a width of 350 and height of 600?
August 19, 2010 - 12:50pm — ricocheting
Answer - Static width and height
February 13, 2011 - 9:58am — Anonymous
Stop at end of show
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
Answer: Autoplay stops after one playthrough
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);}}
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
Question: Remove the play buttons & Pull down menu
I would like to remove the play buttons and the slide selector. How would I do that without messing up the sideshow from running?
February 22, 2011 - 8:29pm — ricocheting
Answer
You can remove the play/stop/next/last/prev buttons by deleting (or commenting out) the following:
<tr><td align="center" style="border:1px black solid;">
<input type="button" onclick="rotate(0);" value="ll<<" title="Jump to beginning" />
<input type="button" onclick="rotate(x-1);" value="<<" 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=">>" title="Next Picture" />
<input type="button" onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" />
</td></tr>
The Slide Selector is required as that is where the actual slide URLs are stored so it can't be removed-removed.
However, 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;">
May 16, 2011 - 7:35pm — Anonymous
Question: Using my own control button images
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
Answer: Custom controls
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>
May 28, 2011 - 5:28pm — Anonymous
Centering
Mine keeps aligning to the left of my screen? How do I center it?
May 29, 2011 - 8:15pm — ricocheting
Answer: Center alignment
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 12, 2011 - 2:12am — Anonymous
doesnt loop back to first image after user clicks to end
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
Answer
To prevent the buttons from allowing it to roll over and starting again, change:
x=num%fs.length;
if(x<0) x=fs.length-1;
x=num;
if(x>=fs.length) x=fs.length-1;
if(x<0) x=0;
November 27, 2011 - 8:35pm — Anonymous
Adding more than 10 slides
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
Answer: Adding additional slides
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
Trying to make a Photo gallery
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.
May 1, 2012 - 10:36am — ricocheting
Answer: Link to specific slide
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 (2 would be the third slide as it starts from zero: 0,1,2)