Notes before starting
- This is a more complex Slideshow Generator. Through this generator you can make a slide show javascript with a wide variety of display and mechanical options. There is also the original slideshow script that uses a lot less code (however, it also has fewer options).
Examples/Help
- Help: All the options enabled, and explanations of each option
- Example 1: Simple Slideshow with Title and Controls
- Example 2: Even simpler Slideshow
Comments
July 19, 2010 - 2:45am — Anonymous
Question: Can I make slideshow disappear after one run
Is there any way to make the slideshow disappear all together after one run? I am making a sort of slide-in effect using multiple images running at fast speed. But the problem is that when it is done i want it to stop, but it keeps going again and again.
Thank you again,
Sergey.
July 19, 2010 - 10:32pm — ricocheting
Answer: Hiding the slideshow after one play-through
i=num%theimage.length;
toi=num;
if(i>=theimage.length){playing=clearTimeout(playing);document.getElementById('slide_table').style.visibility="hidden";return;}
and change the table from
<table border="1" cellpadding="2" cellspacing="0">
to<table border="1" cellpadding="2" cellspacing="0" id="slide_table">
That will make the everything inside that table hide itself after it plays through once. If you want to actually REMOVE the the table (will generally resize the page afterward to make up for the missing content) use style.display="none" instead of the style.visibility="hidden"December 11, 2010 - 12:06pm — Anonymous
what about having it stop on the last slide?
if i want to have it play through the slides and then stop at the last slide (as in, not auto-repeat), how would that work? thanks so much, this is really helpful.
December 11, 2010 - 7:40pm — ricocheting
Answer: Stop autoplay after last slide
Yes, you can have it get to the last slide and just stop using this. Use the same instructions, just without the "hiding" part. So the "if" line in my above post would look like this instead:
if(i>=theimage.length){playing=clearTimeout(playing);return;}
July 26, 2010 - 1:22pm — Anonymous
Question: Editing the table
[edit] I'm removing the actual questions and consolidating the different answers for editing the slideshow table.
July 26, 2010 - 6:05pm — ricocheting
Answer: Center aligning slideshow table
August 6, 2010 - 6:06pm — ricocheting
Answer: Removing the table border
May 29, 2011 - 8:22pm — ricocheting
Answer: Removing extra space around the slide image
September 24, 2015 - 4:01pm — farragio
Border at bottom
On the top and sides there is no spacing around the images but no matter what edits I've tried that you've suggested here there is white spacing at the bottom of the image that I can't seem to get rid of. I've even tried valign="middle" command to try and center the image to make an even white space on top and bottom but that doesn't work either.
September 24, 2015 - 9:20pm — ricocheting
Answer
</script></a></td></tr>
August 1, 2010 - 7:05am — Anonymous
Image size
Hi, is it possible to add the (restricted) picture size to the code?
For Example: width="200" height="75" or height=''''
Now all pics are different in size! and I want to give them the same size
Let's say I have a pic size 245x89 and a pic 288x88 and 311x121 and I want all to be shown at 200 width to get the same horizontal size.
Is it even possible to shrink/ stretch the height in the same process to 75?
August 1, 2010 - 12:40pm — ricocheting
Answer: Hardcoding an image size
In the script it will look something like this:
However, for the best results you should usually edit the photos on your computer before you upload them to the website.
August 20, 2010 - 3:49am — Anonymous
Bug: Multiple Slideshows on the same page
Hi, can you please add a slide show ID to version 2 aswell....Love your work....Thanks
August 20, 2010 - 1:11pm — ricocheting
Answer: Multiple Slideshows
To be perfectly honest that will probably never happen with this v2. Version 2 is large and complicated enough I can't easily use the "hack" that worked with v1 to allow multiple slideshows. Changing v2 to allow multiple slideshows would require a major rewrite. At some future point I might create a third version to combine some of these features and add new ones but nothing is currently being planned.
September 16, 2010 - 11:06am — peyton08
Slideshow won't autoplay
I love your slideshow code generator. However, I would like for my slideshow to automatically begin playing as soon as my page load, and even though I select "Autoplay on page load" when generating the code, it still ends up that my users have to click on the "Play" button to begin the slideshow, instead of it beginning on its own. How can I fix this?
[edit]
Thanks so much!! I had another slideshow on the site that I wasn't removing in case this slideshow didn't work, and that was what was interfering.
September 16, 2010 - 1:26pm — ricocheting
Answer
Do you have something else (some other script) on your page that does some type of "onload"? if so, it can override the one from here. You'd need to combine the two onload events so they'll both get triggered. If you need help reply with the link to your page and I'll take a quick look at it.
September 23, 2010 - 8:30pm — jpowersclay
Two onload events
I saw your reply re combining two onload events so they'll both get triggered. How would I do that? Here is the first one, where do I put the slideshow one? Thanks.
<body onload="MM_preloadImages('images/flag-uk_MO.png');">
September 24, 2010 - 12:17am — ricocheting
Answer: Combining onload events
window.onload=function(){
//preload images into browser
preloadSlide();
//set the first slide
SetSlide(0);
//new event from body onload
MM_preloadImages('images/flag-uk_MO.png');
}
September 23, 2010 - 5:50am — Anonymous
Question: Editing the slide descriptions/titles
[edit] I'm removing the actual questions and consolidating the different answers for editing the slideshow descriptions and titles.
September 23, 2010 - 12:46pm — ricocheting
Answer: Changing slide title color
To change the color of the slide titles, change:
<div id="slidebox"></div>
to (with whatever CSS options you need):<div id="slidebox" style="font:14pt Arial; color:#FF0000;"></div>
May 9, 2011 - 3:41pm — ricocheting
Answer: Moving slide title to a different area
To move the slideshow title to another area, just move the table cell that contains
<div id="slidebox"></div>
to where you want it to appear. Above the image or wherever it is needed.
March 17, 2022 - 12:41pm — farragio
Make the title a clickable link?
(Your slideshow generator has been an invaluable asset. I have used it countless times through the years.) Is it possible to make the title for each image a clickable link? (Not the text links that can be included, but the titles themselves). I've tried tinkering with the code but have had no luck. Thank you.
March 17, 2022 - 12:52pm — ricocheting
Answer: Clickable titles
The title is displayed in
<div id="slidebox"></div>
So you should be able to just wrap the link around that:
<a href="#" onmouseover="this.href=theimage[i][1];return false"><div id="slidebox"></div></a>
Alternately, just wrap that link around any component you want to be clickable.
March 17, 2022 - 3:21pm — farragio
Multiple Title Links
Thanks for the quick reply. Is it also possible to have a different link for each title? I need each one to click to a different page. Thanks.
March 17, 2022 - 3:36pm — ricocheting
Answer
The code I provided should go the unique "Link URL" that was entered for each slide. If you need an additional link besides the slide's "Link URL", that is doable but you would need significant modifications to the script to store/handle that additional info.
January 24, 2011 - 6:31pm — Anonymous
Question: Changing the links
How do I make the images non-clickable? It appears that by default, clicking an image reloads the current page. Also, is there any option to open the links in a new window?
January 25, 2011 - 8:55pm — ricocheting
Answer: Removing all links
if you want all the images to not even show they are clickable, you can remove
<a href="#" onmouseover="this.href=theimage[i][1];return false">
and</a>
down near the bottom.August 16, 2010 - 7:43pm — ricocheting
Answer: Links open in new window
January 25, 2011 - 4:31pm — Anonymous
Pause on mouse hover/start again on mouse out
I want to have the image rotation stop/pause on mouse hover then start up again say 2 sec(2000) after the mouse has left (mouse out)
Could you add this function to your code?
January 25, 2011 - 9:17pm — ricocheting
Answer
If you have it set to automatically autoplay, you can replace:
<a href="#" onmouseover="this.href=theimage[i][1];return false">
with<a href="#" onmouseover="if(window.playing)PlaySlide();this.href=theimage[i][1];return false" onmouseout="PlaySlide();">
January 6, 2012 - 11:10am — enjreviews
Removing and changing action buttons
I want to completely get rid of the two advance buttons (<< & >>) and change the < & > buttons to images that I have created, the images will then be placed accordingly: The < image would be placed on the left of the slide and the > would be placed on the right. How can I go about doing this? Can it be done? I really struggle with HTML.
Thank in advance. :)
January 10, 2012 - 7:44pm — ricocheting
Answer
Choose the image controls when you create the slideshow. Then just delete the buttons you don't want. The code for "first" and "last" is:
<a href="javascript:SetSlide(0);" onfocus="this.blur()"><img src="c1.jpg" width="30" height="25" border="0" alt="To Start"></a>
and<a href="javascript:SetSlide(theimage.length-1);" onfocus="this.blur()"><img src="c6.jpg" width="30" height="25" border="0" alt="To End"></a>
For the controls you want custom, the easiest way would be to replace the c2.jpg and c5.jpg images with your own (make sure you keep the file names the same).
January 24, 2014 - 5:18pm — ricocheting
Internet Explorer 10/Transitions
Internet Explorer 10 finally removed their built-in (non W3C approved) transition effects. Based on that I stripped out all those options from the generator and the slideshow should now work correctly in IE 10.
If slide transitions are something you require (in any browser), you should look for an existing slideshow that already supports them. Adding them to this slideshow would require lots of additional code.