Image Slideshow HTML 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
- 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
Note
Comments
Troubeshooting my Slideshow.
So, I posted your slideshow code onto my website, and I've attempted to have more than one slideshow at a time. For some inexplicable reason, this causes them to not want to work. It doesn't seem to matter how many I have. As long as there is more than one, it causes a problem.
Currently...I have ten.
I sent posted a comment to your site earlier today, asking for help with this same problem. I had forgotten that I had an account on your site, so I am now posting as myself.
I also had another question. 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? Is that even possible?
Answer - Changing the background color
Answer - Multiple slideshows on the same page. Coming soon
The problem with multiple slideshows is that when you click one of the buttons the browser has no idea which slideshow you meant to control since there are multiple copies on the page.
There have been several people asking about this so it is something I will address in a future version. "Future" meaning hopefully within the next couple weeks.
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.
Can you help?
Answer
However, for the best results you should usually edit the photos on your computer before you upload them to the website.
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, and if there is something to do with the image scroll feature (that would be nice to get rid off).
Oh and I noticed in the code there was no link back to this site, so I but one on my site.
Thanks again!
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>I'm not sure what you mean by the "scroll feature" but you can just delete the first,prev,next,end buttons if that's what you want. The "play/stop" button text is how the autoplay determines its status so it can't be deleted unless other modifications are also made.
You are welcome to link back to any of my stuff, but it is by no means required. The site isn't here to see how much traffic I can get/control (I have a day-job for that), the site is here so people searching for info or scripts can (hopefully) find what they need.
Thanks again
The autostart works fine and dandy. About the scroll part I mean the button (scroll?) in which you can select from all the pictures, that is found right over the "start" button.
I primary cause I linked back here is that maybe by doing so I will save others the time I spend searching and anyways there are a bunch of interesting and useful scripts here.
Thanks again!
Answer
The dropdown/<select> box is what actually holds all the image URLs for the slides so it's not removable in this simpler script. You might try the Image Slideshow v2 which is much more customizable and has all the options that you asked for. However, the code is larger and more complex.
Changing the size of the Cell with the Description
Hello,
First, thank you for the slideshow. It's just what we were looking for.
[link removed]
How can we change the height and width the cell where the description is displayed?
Some of our descriptions are lengthy.
Thank you!
Kim
Answer - Changing the description text size & style
You can also change the font size/style on this slideshow to make the text not appear so big. You change the:
image slideshow questions
Hi there, thank you for this awesome site and ability to have the source code created for us.
Question: I have copied/pasted the source code of my photos into my website page yet only the first 2 photos appear, then the dreaded RED "X" shows up for the balance of photos. I've used the same slide image address for all photos and still only the first 2 appear. Any idea what I'm doing wrong, if the source code reads the first 2 photos ok, why not the rest?
Also, can I change the dimensions to the size of slideshow, or is this determined by largest photo? Can I also change the font size of photo 'description' or photo 'name'? Some of mine are quite lengthy but if I could reduce the font size, it would fit?
Appreciate any further insight you can provide.
Sincere thanks,
RL
Answer
For the image size, in most modern browsers it will auto-resize the content around the current image size. If you want to force it to a specific size, you can add a width and height property to either the <img> or the <td> surrounding the image.