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:

Comments

"whole folder" option?

Is it possible to create a version of this generator that can be set to use all of the pictures in a folder, rather than adding each photo individually? I am hoping to use this with a collection of a couple hundred photos! Thanks.

Answer

No, it's not possible with this (or any) Javascript. In order to get a list of files from a folder on your site you need some type of server-side script (something like PHP or ASP).

Slide Show ID - Multiple Slideshows

Hi, can you please add a slide show ID to version 2 aswell....Love your work....Thanks

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.

Bug: Random Transitions problem

Great program; simple enough that I can understand it, mostly.

Having problems with the transition of '23' (random); there doesn't seem to be a random transition enabled. The generated code has this:

transattributes='23';// duration=seconds,transition=#<24

Is there supposed to be two values in there? One for duration, one for transition ?

Thanks...Rick...

Answer

You only need the 23 there. The duration of 1 second is hardcoded in GetTrans().

I played with it some and the "problem" is that random does work, but it works by picking one at random when the page loads. And every transition while playing will be that same "random" one. The way Internet Explorer is handling it, to get a new transition you need to reload the page.

There is probably a way to force IE to reload of the random transition every time the slide changes. I tried reapplying the filter every time the slide changed, but it didn't seem to do any good. Honestly since the filters only work in Internet Explorer I never really messed with them. Maybe someone else has some ideas though.

If anyone wants to mess with it, the transitions are currently assigned in GetTrans() and they are applied and played in SetSlide() with the two ... "document.images.imgslide.filters" ... lines.

Question: Opening links in a new window

Is there any option to open the urls the pictures in the slideshow link to in a new window?

Answer

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

Question: Removing the Border

GREAT slide show maker!!!! I just have one question- is there any way to remove the border that is created??? I just want a slideshow with images=/

Thanks

Answer

Yes, you can easily remove the border around the slideshow. Change:
<table border="1" cellpadding="2" cellspacing="0">
to
<table border="0" cellpadding="2" cellspacing="0">

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

Is it even possible to shrink/ stretch the height in the same process to 75?

riso
The Netherlands

Answer - Hardcoding an image size

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.

Question: Center Align

I was wondering if is possible to center align the slide show, currently is set to left justify.

Answer

To center align the slideshow, change
<table border="1" cellpadding="2" cellspacing="0">to
<table border="1" cellpadding="2" cellspacing="0" align="center">

Question: Can I make slideshow disappear after one run

thank you so much for writing such a simple and useful code. I was wondering, 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 its done i want it to stop, but it keeps going again and again.

Thank you again,
Sergey.

Answer

There's no easy way to make it disappear after one run. However, if 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"

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.