swiss army slideshow fade issue

**ckwebber** · 01-24-2007, 04:47 AM

Swiss Army Image Slideshow
http://www.dynamicdrive.com/dynamici...army/index.htm

I tried to deploy this script here:
http://www.marcos-ac.com/wip/profile.htm

The problem is that the fade only works on every other picture. Ideas?

Smaller issues:
1. Is there a way to make the buttons not "depress" and just be image links? In other words, when you click on them, they don't have that shadow appear around them.
2. Is there a way that the slideshow could stay running and clicking on the arrows would just "hurry up" the show to the next image? This would negate the need for a play/pause button.

**jscheuer1** · 01-24-2007, 06:27 AM

The strange fading behavior is only happening in IE. To fix that, add a valid DOCTYPE to your page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head>
<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

To make the buttons not "depress", get rid of the red parts in the below code section from swissarmy.js (there are three of them, scroll the below code to see all three):

Code:

inter_slide.prototype.controls=function(){
var brs=this.addbr? '<br>' : ' &nbsp;';
if(!this.ics&&!this.no_c)
document.write('<div align="center"><input id="prev'+this.issid+'" disabled type="button" value=" << " onclick="iss['+this.issid+'].changeimg(false, \'nav\');">\n'+
(this.no_auto? '&nbsp;&nbsp;&nbsp;' : ' <input id="gostp'+this.issid+'" type="button" value=" Stop " onclick="iss['+this.issid+'].gostop(this);">\n')+
' <input id="next'+this.issid+'" disabled type="button" value=" >> " onclick="iss['+this.issid+'].changeimg(true, \'nav\');">'+(this.jumpto? brs+'Jump to: <input disabled type="text" size="'+this.imgs.length.toString().length+'" id="goto'+this.issid+'" onkeydown="iss['+this.issid+'].jumper(event);"><input id="go'+this.issid+'" disabled type="button" onclick="iss['+this.issid+'].jumper();" value="GO">' : '')+'<\/div>')
else if(this.ics&&!this.no_c){
var op=document.body.filters? ' style="filter:alpha(opacity=100);"' : ' style="opacity:'+(this.man_start? 0.99 : 0.45)+';"';
document.write('<table align="center" cellpadding="0" cellspacing="10"><tr><td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" type="image" title="Previous" id="prev'+this.issid+'" src="'+previmg+'" onclick="iss['+this.issid+'].changeimg(false, \'nav\');"><\/td>'+(this.no_auto? '<td>&nbsp;<\/td>' : '<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" title="Stop" type="image" id="gostp'+this.issid+'" src="'+(this.g_fPlayMode? playimg : stopimg)+'" onclick="iss['+this.issid+'].gostop(this);"><\/td>')+'<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" type="image" title="Next" id="next'+this.issid+'" src="'+nextimg+'" onclick="iss['+this.issid+'].changeimg(true, \'nav\');"><\/td><\/tr><\/table>\n');
}
else
this.no_c=1;
}

I really don't think that your last request is feasible. The show needs time to preload each image as it goes along. When operating in manual mode, it switches to a different preloading algorithm and keeps track of which image is doing what in a different manner. The two methods cannot be easily combined. It might be able to be done but, there is no simple way I can think of to modify the script for that.

**ckwebber** · 01-24-2007, 06:55 PM

I appreciate your help very much.

The only trouble is that when I take it out of quirks mode, I lose my borders...

Quirks mode: http://www.marcos-ac.com/wip/profile.htm
Doctype specified: http://www.marcos-ac.com/wip/profiledoc.htm

Do you have any suggestions for me?

**jscheuer1** · 01-24-2007, 08:36 PM

The borders are not consistent across browsers even in quirks-mode. FF shows none, Opera shows a black outline around the entire viewable area and IE shows a lighter colored border on the middle section.

There is a table:

Code:

<table width="766" border="0" cellpadding="0" cellspacing="0">
          <tr valign="top">
            <td width="455" background="images/bg_gray.gif" style=" background-position:right; background-repeat:repeat-y"><img src="images/t_about_us.gif" width="109" height="37"><br>
                <div class="text" style="margin-left:27px; width: 400px;"><img src="images/p_09.jpg" width="146" height="86" style="margin-top:4px; margin-right:10px; float: left;">

                  <p>As a small business, we recognize the immeasurable value that all of our customers bring to our company. Unlike other “here today, gone tomorrow” companies, our main priority is to ensure that . . .

If it could be given this style:

border-left:1px solid #cccccc;
border-right:1px solid #cccccc;

It would probably render in all browsers with the DOCTYPE as I am seeing it in IE in quirks-mode.

Thread: swiss army slideshow fade issue

Thread Tools

Search Thread

swiss army slideshow fade issue

Bookmarks

Bookmarks

Posting Permissions