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:
Transitions
Use Transition:
(note: these only work in Internet Explorer)
Show Transition Controls:
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;">

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.

April 3, 2012 - 9:06pm — fulofgracetx

My image is getting cut off on the right side. I have tried to edit the photo before I upload the image, but to no avail. So then next best thing would be to specify the image width. I have tried using the example above (document.write...) but this does not work. Here is my code:

// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://www.thecomingmessenger.org/uploads/5/0/0/4/5004724/media_slide_sh...", "", ""];

Where do I specify the height to be 1200?

April 4, 2012 - 6:16pm — ricocheting

The script doesn't have a way to specify a per-slide height. They all need to be set to the same width by editing the <img> tag as demonstrated in my above post (it's near the bottom of the script). Change:
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
to:
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0" height="1200">')

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>

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

February 27, 2011 - 3:58pm — ricocheting

The whole blendTrans() and revealTrans() used in this slideshow are CSS properties Microsoft created for their Internet Explorer browser, they are not standard/valid CSS and will not work in any browser except Internet Explorer. There are other methods to create transition effects that will work in all major browsers, but they require a lot more code to implement so I never added them to this slideshow.

The transitions in this slideshow are simply a bonus I added for IE since it was easy to implement.

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

May 15, 2012 - 1:25pm — Anonymous

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

Thanks.

Stephen

June 22, 2012 - 6:17am — Anonymous

is it possible to make the transition take longer in seconds?

June 22, 2012 - 11:48am — ricocheting

Yes, in the script there is
blendTrans(duration=1and
revealTrans(duration=1depending on which transition you are using. Change the duration=1 to length in seconds you want your transition to last.

July 13, 2012 - 6:39pm — Anonymous

(this is about the V2 generator)
------------------------
1. How many images can I add to this slideshow? Is there any limit?

2. I want to add a slideshow to one of my community blog posts. But this community blog doesn't allow javascript - only BBcode and simple HTML ("BBcodeFilterHTML"?). So, I am thinking of creating the slideshow in my own webpage, and then embed/include it (the display page) in the blog post using an "Iframe" tag. Will it work? Any suggestions?

3. How should I manage images of different sizes? There are many pictures of many different sizes.

Jack

July 14, 2012 - 11:49pm — ricocheting

1) There is no upper limit to the number of images you can put in the slideshow.

2) Does the blog allow iframe? I would bet it might be blocked too. I can't really think of any solution other than just linking to your website and sending the people there.

3) The slideshow can handle multiple size images just fine. However, it might cause the page to resize depending on the image. In which case you can prevent that by putting the slideshow inside of an element with a width and height set to the largest image size.

July 29, 2012 - 9:46am — enjreviews

Hello,
I am building a gaming site and I am using your slideshow tool to display featured posts inside my blog. But I have encountered one major problem after editing the code - it will not play. I have tried everything to make it work but I cannot seem to find the solution. You can find the slideshow here - http://enjgaming.blogspot.co.uk/ . I think there is something wrong with the autoplay function - not entirely sure because I'm not too great at html.

Cheers.

July 29, 2012 - 12:37pm — ricocheting

You have other scripts on the page that overwrites the autoplay onload used by the slideshow. It appears to be related to the "widget Navbar."