Image Slideshow v2 HTML Generator

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


Step 1: Configuration
Mechanics
Preload Slides: (load upcoming slides in background)
Random Slide Order: (slide order randomized on page load)
Autoplay
Autoplay on page load: (slideshow starts when page loads)
Autoplay Delay: (seconds between slides)
Show Autoplay Delay Control:
Controls
No Controls



Display Options
Show Slide Title:
Show Slide Number:
Show Text Links:
Show "Jump To" Box:



Step 2: Adding Images
Slide URL:  
Link URL:
Slide Title:
     



Step 3: Generating
   



Step 4: Cut-and-Pasting
Cut-and-paste the below code into the html file where your slideshow will be:
JavaScript

Comments

July 19, 2010 - 2:45am — Anonymous

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

You are comfortable enough to edit it, you can make it work. In the SetSlide() function, change i=num%theimage.length;to
i=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

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

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

[edit] I'm removing the actual questions and consolidating the different answers for editing the slideshow table.

July 26, 2010 - 6:05pm — ricocheting

To center align the slideshow to the middle of the page (or section), change
<table border="1" cellpadding="2" cellspacing="0">
to
<table border="1" cellpadding="2" cellspacing="0" align="center">

August 6, 2010 - 6:06pm — ricocheting

You can easily remove the black border (black box) around the slideshow. Change:
<table border="1" cellpadding="2" cellspacing="0">
to
<table border="0" cellpadding="2" cellspacing="0">

May 29, 2011 - 8:22pm — ricocheting

Some browsers add a default top and bottom margin to the <form> element. This causes unwanted spacing to appear between the slide image and the black bordered table. To get rid of the space you need to edit the <form> element and use:
<form name="slideshow" style="margin:0;">

September 24, 2015 - 4:01pm — farragio

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

You'll need to change the cellpadding="2" to zero. And you might need need to collapse the tags immediately after the image: 
	</script>
	</a>
	</td>
</tr>
into
</script></a></td></tr>

August 1, 2010 - 7:05am — Anonymous

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

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

In the script it will look something like this:
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0" width="200">')

However, for the best results you should usually edit the photos on your computer before you upload them to the website.

August 20, 2010 - 1:11pm — ricocheting

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

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

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

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

The easiest way would be to delete the one out of body tag (so it's just <body> tag) and add it to the slideshow onload:
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 - 12:46pm — ricocheting

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

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

(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

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

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

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

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

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

You can make the URL open in a new window by specifying a target on the slide link. For example, change:
<a href="#" onmouseover="this.href=theimage[i][1];return false">
to:
<a href="#" onmouseover="this.href=theimage[i][1];return false" target="_blank">

January 25, 2011 - 4:31pm — Anonymous

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

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

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

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 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.