PDA

View Full Version : How to start Swiss Army slideshow with a mouse onClick button



Yanhuang Zisun
11-06-2010, 10:49 PM
I appreciate Swiss Army slideshow very much and try to use it in one of my personal project. All I want is to start the show with a mouse onClick button; so I put the last statement "new inter_slide(slides)" inside a function, namely "slideit()", and use the onClick button to trigger it. No matter how I tried, it didn't work.

The ending part of the script is show as follows. I sincerely hope somebody can tell me what's wrong. Thanks.



.
.
.
</script>
</head>

<body>

<p>
<script type="text/javascript">

function slideit()
{
new inter_slide(slides);
}

</script>
</p>

<form action="">
<input type=button value="Slideshow" onClick="slideit()">
</form>

</body>
</html>

jscheuer1
11-07-2010, 04:15 AM
I think you mean:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Anyways, the script uses document.write() to set itself up. So delaying that by assigning it to a button click will have problems, at best overwriting the page with just the slideshow.

Here's what to do. Start the slideshow in stopped mode without controls, example (goes in the head):


<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools", "http://www.dynamicdrive.com"];
slides[1] = ["photo2.jpg", "Seated Woman"];
slides[2] = ["photo3.jpg", "The Dog Lovers"];
slides[3] = ["photo4.jpg", "Standing Woman"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus"];

//optional properties for these images:
slides.no_auto=1; //use to make show completely user operated (no play button, starts in stopped mode)
slides.no_controls=1; //will set a slide show with no controls
slides.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls
slides.pause=1; //use for pause onmouseover
slides.use_title=1; //use for descriptions as images title attributes

</script>

<script src="swissarmy.js" type="text/javascript">

/***********************************************
* Swiss Army Image slide show script - (c) John Davenport Scheuer
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>

In the body, make a button after the init:


<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides, 140, 225)
</script>
Some other content<br>
<input type="button" value="Go!" onclick="this.disabled = true; iss[0].gostop();">

Demo:

http://home.comcast.net/~jscheuer1/side/files/swiss_button_start.htm

Yanhuang Zisun
11-07-2010, 10:06 PM
Hi, John,

With your suggestions and my diddling around a little, it works great! Thank you a million!

Yanhuang Zisun

jscheuer1
11-07-2010, 11:56 PM
Playing around with this a bit I noticed one drawback. If you navigate away from the page by clicking on a linked image in the show and then hit the back button - in some browsers (Firefox at least) the show will be paused until you mouse over and out of the image in it that was the trigger, and that the Go! button is still disabled.

I'm not sure what adaptations you've made. But if your show includes linked images, there might be something similar or related going on in one or more browsers.