PDA

View Full Version : Need Help With Swiss Army Image Slide & Firefox



Candleman
06-23-2012, 09:56 AM
1) Script Title: Swiss Army Image Slideshow

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

3) Describe problem: This is my first post to the Forum, so hopefully I can provide the right details and get an answer as soon as possible. I have installed the Swiss Army Image Slideshow, centered within a web page, and it works fine in IE. However, in Firefox, it is off center as far to the right as possible. I have it in a table, which is centered, but I cannot get it to show centered when viewing in Firefox. Any thoughts?

Thank you.

bernie1227
06-23-2012, 10:12 AM
1) Script Title: Swiss Army Image Slideshow

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

3) Describe problem: This is my first post to the Forum, so hopefully I can provide the right details and get an answer as soon as possible. I have installed the Swiss Army Image Slideshow, centered within a web page, and it works fine in IE. However, in Firefox, it is off center as far to the right as possible. I have it in a table, which is centered, but I cannot get it to show centered when viewing in Firefox. Any thoughts?

Thank you.

Welcome to the forums candleman! One quick question, how are you centering the table? Could you possibly post the code?

Candleman
06-23-2012, 10:33 AM
Thank you Bernie for your quick response. The code for the entire test page I moved it to is below. The script contained three different slides and perhaps I haven't removed all of the unwanted.

Thanks for any help
C-Man


<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>FF Slide Test</title>
<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:0px 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/left.gif';
var stopimg='images/stop.gif';
var playimg='images/play.gif';
var nextimg='images/right.gif';

var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["images/HP Slide Image 1.jpg", ""];
slides3[1] = ["images/HP Slide Image 2.jpg", ""];
slides3[2] = ["images/HP Slide Image 3.jpg", ""];
slides3[3] = ["images/HP Slide Image 4.jpg", ""];
//optional properties for these images:
slides3.no_descriptions=1; //use for no descriptions displayed
slides3.pause=1; //use for pause onmouseover
slides3.image_controls=1; //use images for controls
slides3.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides3.specs='width=815, height=295' //global specifications for this show's new window(s)
slides3.random=0; //set a random slide sequence on each page load
slides3.manual_start=0; //start show in manual mode (stopped)

//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="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>
</head>

<body>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="1000">
<tr>
<td>

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="815">
<tr>
<td height="35"></td>
</tr>
<tr>
<td height="295">
<p align="center">
<p>
<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)
</script>
</p>
<p>
<script type="text/javascript">
new inter_slide(slides2)
</script>
</p>
<p>
<div id="show3"><script type="text/javascript">
new inter_slide(slides3)
</script>
</div>
<p align="center"></p></td>
</tr>
</table>

</div>

</td>
</tr>
</table>
</div>

</body>

</html>

jscheuer1
06-23-2012, 02:32 PM
Something like:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>FF Slide Test</title>
<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}

div#show3 {
margin:0 auto;
}

table {margin: 0 auto;}
</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/left.gif';
var stopimg='images/stop.gif';
var playimg='images/play.gif';
var nextimg='images/right.gif';

var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["images/HP Slide Image 1.jpg", "1"];
slides3[1] = ["images/HP Slide Image 2.jpg", "2"];
slides3[2] = ["images/HP Slide Image 3.jpg", "3"];
slides3[3] = ["images/HP Slide Image 4.jpg", "4"];
//optional properties for these images:
slides3.no_descriptions=1; //use for no descriptions displayed
slides3.pause=1; //use for pause onmouseover
slides3.image_controls=1; //use images for controls
slides3.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
slides3.specs='width=815, height=295' //global specifications for this show's new window(s)
slides3.random=0; //set a random slide sequence on each page load
slides3.manual_start=0; //start show in manual mode (stopped)

//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="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>
</head>

<body>

<div>
<table border="0" cellpadding="0" cellspacing="0" width="1000">
<tr>
<td>

<div>

<table border="0" cellpadding="0" cellspacing="0" width="815">
<tr>
<td height="35"></td>
</tr>
<tr>
<td height="295">
<div id="show3"><script type="text/javascript">
new inter_slide(slides3, 300, 300)
</script>
</div>
</td>
</tr>
</table>

</div>

</td>
</tr>
</table>
</div>

</body>

</html>

You might need to bring back some of the optional styles in order to get the image controls to look right. Or you could always go with the default buttons by commenting out this line:


slides3.image_controls=1; //use images for controls

Candleman
06-23-2012, 04:14 PM
Thank you so much ...you were right on the money. It works perfectly!