PDA

View Full Version : Swiss Army Image slide show - stopping at end



Danopoly
03-09-2007, 05:53 PM
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
03-09-2007, 07:54 PM
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/dynamicindex14/swissarmy/index.htm

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

Danopoly
03-09-2007, 08:14 PM
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
03-09-2007, 11:14 PM
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
03-09-2007, 11:26 PM
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
03-09-2007, 11:27 PM
Who you callin a RESOURCE :) lol
(it sounds like you just called him a resource muahahaha)

Danopoly
03-13-2007, 03:32 PM
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
03-28-2007, 03:36 PM
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
03-28-2007, 04:04 PM
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
03-28-2007, 04:28 PM
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

jscheuer1
03-28-2007, 06:34 PM
OK, well you didn't remove the code for the optional styles and I'm not certain you commented them out properly:


<style type="text/css">

/* All Styles Optional */

/* * {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:195;
height:156;
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>

on the link you posted. These were only required for the demo shows and removing them will have little or no effect but, might as well just get rid of the whole style block shown above.

OK, turns out I was only half right. The problem is a number of things and varies by browser. Some is layout, some is the script configuration. But, by taking these two steps it will be fine in most (IE, FF, Opera - probably others):

1 ) Add these properties for slides2 (red):


. . . order_color='white'; //set border color for images
slides2.delay=3000;
slides2.no_controls=1;
slides2.no_added_linebreaks=1;
slides2.no_descriptions=1;

2 ) Remove the p element (red):


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

Danopoly
03-28-2007, 06:48 PM
:) Thank you so much! This works perfectly.

Danopoly
04-12-2007, 03:29 PM
Well, I'm back...

The slideshow works... and it stops at the last slide. I've shown it to the sales team and they really like the effect... but they want the slideshow to start again if you click on the final image.

(Yes, that sound is me weeping.)

So they don't want the slideshow to loop, per se.

Can you help me with this one?

Thanks!
Dan

jscheuer1
04-12-2007, 05:17 PM
Working from your personal demo from a previous post:


<div id="show3" onclick="if(!iss[0].playing){iss[0].gostop(iss[0].go('gostp0')? iss[0].go('gostp0') : '')};" style="height:156;"><script type="text/javascript">
new inter_slide(slides2)
</script>
</div>

Notes: All those zeros refer to the first slide show call on the page, which I believe yours is. It's the first and only.

Danopoly
04-12-2007, 05:22 PM
:D

Thank you! That's exactly what I needed.

Dan

jscheuer1
04-12-2007, 06:05 PM
If you want to get a little fancier with it, do it this way:


<div id="show3" onclick="if(!iss[0].playing){iss[0].gostop(iss[0].go('gostp0')? iss[0].go('gostp0') : '')};" onmouseover="if (!iss[0].playing){this.getElementsByTagName('img')[0].title=this.getElementsByTagName('img')[1].title='Click to Restart';this.style.cursor='pointer'}else{this.onmouseout()};" onmouseout="this.title='';this.style.cursor='';" style="height:156;"><script type="text/javascript">
new inter_slide(slides2)
</script>
</div>

That will give a 'tooltip' of "Click to Restart" if it is stopped and make the cursor look clickable, also only if it has stopped.

Danopoly
04-12-2007, 06:28 PM
Now that's service! I was thinking as I was working on the page... Gee, I wish I could... and there you go, adding it for me. Awesome! Thanks!

Danopoly
07-02-2007, 03:14 PM
Apologies if you've covered this somewhere. The slideshow appears above the sidebar navigation. I've tried to modify the z-index value, but I'm not having any luck.

I'm using the slideshow outlined in the previous posts...

Thanks!
Dan

jscheuer1
07-02-2007, 09:27 PM
You cannot really modify the z-index values for the slide show. Those are dynamic, but (unless we used a higher z-index somewhere in our modifications), fluctuate only in a low range - under 5. So, you would just need to make your menu's z-index higher, like 100. However, the menu would need to be absolutely or relatively positioned (most menus that have things that appear and disappear already are) for this to make a difference in a standards compliant browser.

Danopoly
07-02-2007, 09:46 PM
Thanks for the quick response! The menu is positioned relatively, but I think with a little tweaking, I can get it to be absolute and get things to work.

Again, thanks for all the help!
Dan

jscheuer1
07-03-2007, 02:21 AM
The menu being relatively positioned is fine.