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).
Hi! Great application! I would like to get rid of the frame round the slideshow, i couldn't find anything in the code(I'm new to this but i tried) that looked like it would help me with my problem. Perhaps you have an answer to my question? :)
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.
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 have the previous and next actions moved? I would like to style mine so that the previous action is on the direct left of the slide and the next action on the right? Like this: <|SLiDE|>
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.
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();">
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.
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.
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>
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.
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.
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.
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:
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.
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:
Comments
Remove the frame
Hi! Great application! I would like to get rid of the frame round the slideshow, i couldn't find anything in the code(I'm new to this but i tried) that looked like it would help me with my problem. Perhaps you have an answer to my question? :)
Thank you!
Answer
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. :)
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).
That worked but...
Is it possible to have the previous and next actions moved? I would like to style mine so that the previous action is on the direct left of the slide and the next action on the right? Like this: <|SLiDE|>
Answer
Replace the block between
<!-- slide show HTML -->and<!-- end of slide show HTML -->with something like this:<!-- slide show HTML -->
<form name="slideshow">
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center"><a href="javascript:SetSlide(i-1);" onfocus="this.blur()"><img src="c2.jpg" width="30" height="25" border="0" alt="Previous Image"></a></td>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
<td align="center"><a href="javascript:SetSlide(i+1);" onfocus="this.blur()"><img src="c5.jpg" width="30" height="25" border="0" alt="Next Image"></a></td></td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
Firefox not displaying correct transition style
I really like your generator, but I can't seem to get the transitions to work correctly in Firefox. But they display correctly in IE.
Answer: Transitions in other browsers
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.
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?
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();">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?
Answer: Links open in new window
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.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.
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.
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>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.
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.
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');">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');
}
Bug: Multiple Slideshows on the same page
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.
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?
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.
Question: Editing the table
[edit] I'm removing the actual questions and consolidating the different answers for editing the slideshow table.
Answer: Removing extra space around the slide image
Answer: Removing the table border
Answer: Center aligning slideshow table
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.
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"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.
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;}