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:

Comments

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.

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"

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.

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;}

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

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

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

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;">

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?

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.

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.

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.

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.

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');">

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');
}

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>

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?

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.

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

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?

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();">

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

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

Is it possible to simply show all images in a folder/directory? That way, I'd only have to upload new images to the folder to changes the slideshow.

It sounds like what you want is a "Conveyor Belt Javascript." This wasn't really designed to have that functionality, but searching for the above phrase should find you a script with the behavior you want.

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.