Swiss Army Image slide show - stopping at end

[Danopoly]

1) Script Title: Swiss Army Image slide show script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm

3) Describe problem: I have the controls hidden and I want the slideshow to run through its list of slides and then stop at the last image. Is there any way to do that?

An alternative would be to time the last slide to stay on for a long time (say, a few minutes).

I really like the resources here at Dynamic Drive! I've learned a lot here.

Thanks,
Dan

[jscheuer1]

That can probably be worked out. The link to the script in your post is broken, I think you mean this:

http://www.dynamicdrive.com/dynamici...army/index.htm

You say you have no controls, do you have descriptions? Could you give us a link to your page?

[Danopoly]

Thanks. I can't link the page, because it is on a development (internal) site. But here is the code I'm using:

I don't have descriptions in this particular slideshow.

<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input,  div#show4 table input {
outline-style:none;
}
</style>

<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

<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=true;

//And configure the image buttons' images here:
var previmg='../../../images/member_statistics/slideshow/left.gif';
var stopimg='../../../images/member_statistics/slideshow/pause.gif';
var playimg='../../../images/member_statistics/slideshow/play.gif';
var nextimg='../../../images/member_statistics/slideshow/right.gif';


var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own. 
slides2[0] = ["../../../images/welcome_slides/1-best_practices.jpg", ""];
slides2[1] = ["../../../images/welcome_slides/2-wealth_transition.jpg", ""];
slides2[2] = ["../../../images/welcome_slides/3-industry_research.jpg", ""];
slides2[3] = ["../../../images/welcome_slides/4-networking.jpg", ""];
slides2[4] = ["../../../images/welcome_slides/5-governance.jpg", ""];
slides2[5] = ["../../../images/welcome_slides/1-best_practices.jpg", ""];
slides2[6] = ["../../../images/welcome_slides/7-family_education.jpg", ""];
slides2[7] = ["../../../images/welcome_slides/8-family_office_exchange.jpg", ""];
//optional properties for these images:
slides2.desc_prefix=''; //string prefix for image descriptions display
slides2.controls_top=0; //use for top controls
slides2.counter=0; //use to show image count
slides2.width=500; //use to set width of widest image if dimensions vary
slides2.height=400; //use to set height of tallest image if dimensions vary
slides2.no_auto=0; //use to make show completely user operated (no play button, starts in stopped mode)
slides2.use_alt=0; //use for descriptions as images alt attributes
slides2.use_title=0; //use for descriptions as images title attributes
slides2.nofade=0; //use for no fade-in, fade-out effect for this show
slides2.border=0; //set border width for images
slides2.border_color='white'; //set border color for images
slides2.delay=3000;
slides2.no_controls=1;
//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

</script>

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

/***********************************************
* Swiss Army Image slide show script  - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>
<!-- PAGE BODY BEGIN -->

<link href="/include/fox_style_new.css" rel="stylesheet" type="text/css">
<P><IMG SRC="../../../images/blank.gif" WIDTH="530" HEIGHT="1"></P>
 

<TABLE WIDTH="633" BORDER="0" CELLPADDING="4">
<TR> 
    <TD width="621" VALIGN="top">
      <table width="500"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div align="left">
        <script type="text/javascript">
new inter_slide(slides2)
      </script>
      </div>

Thanks for the help!
Dan

[jscheuer1]

OK, looking at things, it doesn't matter so much what the other options are. We (at least I) would want this to work with any configuration. So, what I did was create a new boolean option, in your case it would be:

slides2.once=1;

It can go in with the other options you have:

slides2.width=500; //use to set width of widest image if dimensions vary
slides2.height=400; //use to set height of tallest image if dimensions vary
slides2.once=1;
slides2.no_auto=0; //use to make show completely user operated (no play button, starts in stopped mode)
slides2.use_alt=0; //use for descriptions as images alt attributes

That's the easy part. Now we have to edit swissarmy.js to use it. Near the beginning add the red part as shown:

function inter_slide(){
if(!document.images||arguments.length==0)
return;
var imgs=arguments[0];
var width=null, height=null, delay=null;
if(arguments.length==2)
delay=arguments[1];
else if(arguments.length==3||arguments.length==4)
width=arguments[1], height=arguments[2], delay=arguments[3]? arguments[3] : null;
this.dom=(document.getElementById) //modern dom browsers
this.once=imgs.once;
this.da=document.all
this.delay=imgs.delay? im . . .

And, add this bit (also red) to the inter_slide.prototype.changeimg=function(bool,nav) which is about midway through the script:

inter_slide.prototype.changeimg=function(bool,nav){
if(this.playing){
this.buttons(false)
this.nextimgidx=(this.keeptrack()<this.imgs.length-1)? this.keeptrack()+1 : 0
if(this.once&&this.nextimgidx==0&&!this.goagain){
var but=this.go('gostp'+this.issid)? this.go('gostp'+this.issid) : '';
this.gostop(but);
this.goagain=1
return;
}
this.goagain=0
this.populateslide(this.tempobj, this.nextimgidx)
if(bool)
this.rota . . .

That's it! Without controls, it will just stop at the end. With controls it will stop at the end but, may be restarted by the user.

[Danopoly]

Thank you. I will try this out (most likely on Monday). I sincerely appreciate your help in this!

What a great resource you are!
Dan

[pcbrainbuster]

Who you callin a RESOURCE lol
(it sounds like you just called him a resource muahahaha)

[Danopoly]

It works! (Of course it works).

Thank you for your help in getting this done!

This site is a great resource (is what I meant to say)!

Thanks again,
Dan

[Danopoly]

I just can't figure this out now. I'm sure it's something simple.

I'm using the modified script from earlier in this post. However after the slideshow, I'm seeing some additional space. I don't know where this is coming from or how to remove it. Can anyone help?

I've attached a small screenshot of what's going on.

I've set up the size in the relevant parts of the script (at least I believe I have), but no matter what the size, there's always this added space. (I've used the 'div id="show3"' to emphasize this sizing.)

<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input,  div#show4 table input {
outline-style:none;
}
</style>

<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=true;

//And configure the image buttons' images here:
var previmg='../../../images/member_statistics/slideshow/left.gif';
var stopimg='../../../images/member_statistics/slideshow/pause.gif';
var playimg='../../../images/member_statistics/slideshow/play.gif';
var nextimg='../../../images/member_statistics/slideshow/right.gif';


var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own. 
slides2[0] = ["../../../images/welcome_slides/1-best_practices195.jpg", ""];
slides2[1] = ["../../../images/welcome_slides/2-wealth_transition195.jpg", ""];
slides2[2] = ["../../../images/welcome_slides/3-industry_research195.jpg", ""];
slides2[3] = ["../../../images/welcome_slides/4-networking195.jpg", ""];
slides2[4] = ["../../../images/welcome_slides/5-governance195.jpg", ""];
slides2[5] = ["../../../images/welcome_slides/1-best_practices195.jpg", ""];
slides2[6] = ["../../../images/welcome_slides/7-family_education195.jpg", ""];
slides2[7] = ["../../../images/welcome_slides/8-family_office_exchange195.jpg", ""];
//optional properties for these images:
slides2.desc_prefix=''; //string prefix for image descriptions display
slides2.controls_top=0; //use for top controls
slides2.counter=0; //use to show image count
slides2.width=195; //use to set width of widest image if dimensions vary
slides2.height=156; //use to set height of tallest image if dimensions vary
slides2.once=1;
slides2.no_auto=0; //use to make show completely user operated (no play button, starts in stopped mode)
slides2.use_alt=0; //use for descriptions as images alt attributes
slides2.use_title=0; //use for descriptions as images title attributes
slides2.nofade=0; //use for no fade-in, fade-out effect for this show
slides2.border=0; //set border width for images
slides2.border_color='white'; //set border color for images
slides2.delay=3000;
slides2.no_controls=1;
//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

</script>

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

/***********************************************
* Swiss Army Image slide show script  - &#169; John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>

Here is the code in the body of the page:

<p>
<div id="show3" style="height:156;float:left;"><script type="text/javascript">
new inter_slide(slides2)
</script>
</div>
</p>

Any assistance is greatly appreciated!

[jscheuer1]

It is hard to say without seeing the entire page. A link to it would be helpful. Most likely, it is a layout issue having nothing to do with the show itself. The black border on the element that contains both the show and the extra space appears to be on an element that contains the HTML code that you featured in your post. It could be the height attribute or style of this element that is causing the problem or the fact that the division containing the show floats and is contained in a p element or a combination of these things. It could be something else that you haven't shown in your post.

The first thing I would do is to get rid of the optional styles, though - just to see what that does.

[Danopoly]

Thanks.

Here's the same page posted on my personal site. I've removed the optional styles, but I still see some space beneath the slideshow.
http://www.danspeziale.com/index_draft_animation3.htm