Scripting: javascript slideshow bug in Safari

started by Couic on Oct 12, 2004 — RSS Feed

Couic Couic
Posts: 3

Would you have any advice on how to fix this slideshow javascript? it seems to be working fine with IE and Firefox but not with Safari : if the new image loading is larger than the previews one, then all the images being displayed after that will stretch to have the same width as the largest picture.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>New</title>
<script type="text/javascript">
<!--
var num=1,mode;
img1 = new Image ()
img1.src = "1.jpg"
img2 = new Image ()
img2.src = "2.jpg"
img3 = new Image ()
img3.src = "3.jpg"
img4 = new Image ()
img4.src = "4.jpg"
img5 = new Image ()
img5.src = "5.jpg"

function slideshowUp() {
num++;
mode=0;
if (num>=6) {num=1}
document.images['mypic'].src=eval("img"+num+".src";
}

function slideshowBack() {
num--;
mode=1;
if (num<=0) {num=4}
document.images['mypic'].src=eval("img"+num+".src";
}

function Bobiner(){
if (mode==0) {
num++;
slideshowUp();
} else if (mode==1) {
slideshowBack();
}
}
//-->
</script>

</head>


<body>
<CENTER>
<p align="center"><IMG SRC="1.jpg" NAME="mypic" BORDER=0 onerror="Bobiner();"></p>
</p>
<p align="center"><img src="main.gif" width="188" height="50" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="-20,4,33,47" href="JavaScript:slideshowBack()">
<area shape="rect" coords="157,3,194,46" href="JavaScript:slideshowUp()">
<area shape="rect" coords="68,3,121,48" href="http://www.my site.com">
</map>
</p>
</body>
</html>

Joe Gillespie Joe Gillespie
Posts: 528

Safari is below par when it comes to JavaScript but this particular script looks pretty long-in-the-tooth anyway. It is not valid HTML, so anything can happen in modern browsers.

In scripts like this, it is best to stick with images of the same size. If the images are GIF or PNG, you could pad them out with transparent borders. As they are JPGs, you can't do that.

I think that you need a more modern CSS-based slideshow. If you can't find one, I'll do one for the next editorial.

Couic Couic
Posts: 3

Thanx for your answer. My intention using that script was to have a page presenting  a slideshow of jpgs that I have no control over because they are uploaded by users via a php interface. In my example the amount of images is limited (it really is a much higher amount) and the onError fonction is here to rewind the slideshow when visitors reach the last image present in the folder.

Joe Gillespie Joe Gillespie
Posts: 528

So anybody could upload any image of any size ??? Dangerous.

If you set the img size to, say 200 x 300, any image uploaded would be scaled to fit. If you tell people that their images will be scaled if they are not the 'correct' size, they might make an effort. Either way, it would solve your immediate problem.

Couic Couic
Posts: 3

The images are all the same hight (400) but they can vary in width...

Jgold723 Jgold723
Posts: 2

I have the very same problem with a different slide show script. Did you have any luck resolving this? My script is below. You can see it in action at http://www.natashakempers-cullen.com/quilts-slide.shtml.

It works fine in everything, except Safari.

John

<script language="JavaScript">
<!--
var imgArray = new Array("g-color.jpg","g-fifty.jpg","g-heart.jpg","g-jazz.jpg","g-love1.jpg","g-love2.jpg","g-mandala.jpg","g-sonata.jpg","g-spindle.jpg","g-stephanie.jpg","g-stretch.jpg","g-pieces.jpg","g-journey.jpg","g-dancing.jpg","g-joie.jpg","g-leap.jpg";

var descArray = new Array("Color Jazz","50 Something!","Heart of Lightness","Jazz","Love Letters 1","Love letters 2","Mandala Meditation","Sonata for CW","Spindleworks","Stephanie's Quilt","Stretch, Breathe","Pieces","Journey","Dancing in the Shadows","Joie de Vivre","Leap of Faith";

var urlArray = new Array("javascript:open_window('colorjazz.shtml')","javascript:open_window('fifty.shtml')","javascript:open_window('heart.shtml')","javascript:open_window('jazz.shtml')","javascript:open_window('love.shtml')","javascript:open_window('love.shtml')","javascript:open_window('mandala.shtml')","javascript:open_window('sonata.shtml')","javascript:open_window('spindle.shtml')","javascript:open_window('stephanie.shtml')","javascript:open_window('stretch.shtml')","javascript:open_window('pieces.shtml')","javascript:open_window('journey.shtml')","javascript:open_window('dancing.shtml')","javascript:open_window('joie.shtml')","javascript:open_window('leap.shtml')";



var imgDir = "";
var pos = 0;

if (document.images) {
   for (i=0; i<imgArray.length; i++) {
       eval("imgObj" + i + "= new Image()";
       eval("imgObj" + i + ".src = '" + imgDir + imgArray + "'";
   }
}


function toPrevious() {

if (pos == 0) { pos = imgArray.length - 1; }
else { pos = pos - 1 };

eval("document.vvr.src = imgObj"+pos+".src";
document.getElementById("theForm".innerHTML = descArray[pos];

}

function toNext() {

if (pos == imgArray.length - 1) { pos = 0; }
else { pos = pos + 1; }

   eval("document.vvr.src = imgObj"+pos+".src";
   document.getElementById("theForm".innerHTML = descArray[pos]
   document.links[9].href = urlArray[pos];
   
}


//-->
</script>


<table width="450" align=center>
   
 
   
     <tr>
       <td colspan="3" align="CENTER"><A HREF="javascript:open_window('colorjazz.shtml')"><img src="g-color.jpg" name="vvr"></a></td>
     </tr>
     
     <tr>
       <td align="left" valign=middle width=20><a href="javascript:toPrevious()" onMouseOver="self.status='Previous'; return true;" onMouseOut="self.status=''; return true;"><img src="button-left.gif" border="0"></td>

       <td valign=middle align=center width=410 id=theForm>Color Jazz</td>

       <td align="right" valign=middle width=20><a href="javascript:toNext()" onMouseOver="self.status='Next'; return true;" onMouseOut="self.status=''; return true;"><img src="button-right.gif" border="0"></td>
     </tr>
     
      <tr>
       <td colspan="3" align="CENTER"><hr style="height:1px; style:solid; color:#ffffff"><br><a class="close" href="javascript:window.close('filename.html')"><span class="bodytext">close this window</span></td></tr></table>

Joe Gillespie Joe Gillespie
Posts: 528

If you've run the script through Mozilla or Firefox JavaScript debugger and it all seems okay, it will be Safari's fault. Safari is very lame when it comes to JavaScript, especially if you aren't using the very latest one.

Joe Gillespie Joe Gillespie
Posts: 528

I've looked at the page in the latest Safari and the JavaScript runs fine but as you haven't specified any image sizes, every image is resizing to the same size as the first image. You need to make them all the same size or use a different CSS-based technique.

I have CSS-based slide shows at

http://www.wpdfd.com/editorial/wpd0103.htm#feature

and

http://www.minifonts.com/gallery.html

that you can swipe.

Jgold723 Jgold723
Posts: 2

Hey -- very neat CSS stuff! Thanks for the reply -- I'll take a look.

John

Gendem Gendem
Posts: 1

An interesting solution to be sure, but it sure does add to the file size.  Conside having 35 images in a slide show (which I do).  Thant means 35 blocks of CSS in addition to the javascript to control it, as opposed to just the javascript.

I am seeing the same problem: that subsequent images inheirit the size of previous images in a javascript slideshow when no img dimentions are specified and the image widths vary, only in safari.

Is there no solution to this problem that doesn't involve resizing all images to be the same width?

...Mike

Maskodok Eko Maskodok Eko
Posts: 171

Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

You must login to reply