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
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.
This is great, thanks! I do have a question, though... I want people to be able to look at my image and then click certain areas of the image that will take them to a link. I created my image in fireworks with the hotspots, but it exports as a .htm file instead of a .jpg When I try to create a gallery with these, I get the blue question mark.
If I have to use .jpg images, can I make those clickable? How would I do that? Here is a rough sample of my slide show: [snip] For example, I would like the first slide to link here: [snip]
There is no way to make either of my slideshows work so clicking certain areas of the image will go to certain links. Using Slideshow v2.0 you can specify clicking a slide will open up a new window (eg; open a full-size image of that thumbnail or a page with more info on that image).
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?
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.
[edit 2010-08-04] Slideshow has been updated with Side Show ID to allow multiple slideshows on the same page.
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.
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 usually edit the photos on your computer before you upload them to the website.
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!
you can make it autostart by adding: 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.
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.
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.
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:
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?
I took a look at why your slideshow isn't working (I removed those posts, but thanks for providing the link) and some of the images you use in the slideshow do not exist. example:
images/Photo5.JPG
does not exist. did you mean to use the file:
images/Slideshow_Photo5.jpg
I think you originally meant to use the files named like Slideshow_Photo ...... jpg which are also mostly the same size and should also fix your resizing problems.
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.
Comments
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?
Answer
Question: Clickable "Hotspots" within images
This is great, thanks! I do have a question, though... I want people to be able to look at my image and then click certain areas of the image that will take them to a link. I created my image in fireworks with the hotspots, but it exports as a .htm file instead of a .jpg When I try to create a gallery with these, I get the blue question mark.
If I have to use .jpg images, can I make those clickable? How would I do that? Here is a rough sample of my slide show: [snip] For example, I would like the first slide to link here: [snip]
Can you show me how that would be coded?
Answer
There is no way to make either of my slideshows work so clicking certain areas of the image will go to certain links. Using Slideshow v2.0 you can specify clicking a slide will open up a new window (eg; open a full-size image of that thumbnail or a page with more info on that image).
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.
[edit 2010-08-04] Slideshow has been updated with Side Show ID to allow multiple slideshows on the same page.
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.