Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

I have a javascript "jpeg slideshow" that does not work

Status
Not open for further replies.
vr100

vr100

Technical User
Jun 18, 2010
9
US
I have an "jpeg slideshow" of 29 jpeg images on a page created using Javascript. It works fine in Internet Explorer and Firefox but not Safari or Chrome. The jpeg files names are 01.jpg through to 29.jpg. Here below is the code in the header and the body. I work in the fashion industry where everyone tends to use MACs and their own browser, Safari. There is an error in there somewhere:


Here is the page on the website:
Here is the code (the Javascript enabled "jpeg slideshow" is where the trouble maybe):

<html>
<head>
<title>Victor Rossi - Private Label and Couture</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<SCRIPT language="JavaScript" type="text/JavaScript">
<!--
var speed=1333;
var counter=1;
function rollPics() {
document.display.src=counter+".jpg"; //Display image "counter".jpg
counter ++; // Add 1 to counter
if (counter>29) { // If counter is greater than 29 images then reset it
counter=1
}
}
<!-- END -->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<center>
<strong><img src="VR-logo.jpg" width="157" height="33"><br>
<a href="home.htm">Home</a> |
<a href="catalog.htm">Catalog</a> |

<a href="gallery.htm">Fashion Gallery</a> |
<a href="size.htm">Size Chart</a> |
<a href="media.htm">In the Media</a> |
<a href="about.htm">About Us</a> |
<a href="contact.htm">Contact</a></strong></center>
<p><hr width=50%><p><center>
<table cellspacing=0 cellpadding=0 width="702" border=0>
<tr>

<td valign=top>
<b><font color=#808080 size=3>Victor Rossi has evolved from its custom couture design roots into one of the world's most reliable design houses, private label
manufacturers and global sourcing agents. Our combination of innovation, stellar craftsmanship, exceptional customer and client care are our hallmarks.</font>
<IMG NAME="display" SRC="1.jpg" onLoad="setTimeout('rollPics()',1333)">
<!-- the last number here is the delay in one thousandths of a second - you can change this-->
<p><hr width=25%><p>
</td></tr>
<tr><td align=center>
<p>
<FORM METHOD=POST ACTION="<b><font color=#808080 size=3>Join the Victor Rossi mailing list !</b></font><br>
<table border=0>
<tr><td><font color=#808080>name:<BR>
e-mail: <BR></td>

<td><INPUT size=27 name="name"><br>
<INPUT size=27 name="e-mail"></font></td></tr>
<tr><td colspan=2 align=center><INPUT type=submit value="Submit to Victor Rossi">
<INPUT NAME=subject TYPE=HIDDEN VALUE="e-mail list">
<input type="hidden" name="required_fields" value="name,e-mail">
<input type="hidden" name="next_url" value="</FORM>
</td></tr>
</table>
</td></tr>
</table>
</center>
</body>
</html>
 
Sort by date Sort by votes
>document.display.src=counter+".jpg"; //Display image "counter".jpg
[tt]document.[red]getElementsByName("[/red]display[red]")[0][/red].src=counter+".jpg"; //Display image "counter".jpg[/tt]
 
Upvote 0 Downvote
[0] Reading more systematically your script, I would suggest you've to clean up at, least, some ill-formed tag and unclosed tag, unquoted attribute values etc etc.

[1] Then there is one detail on the onload event for image (img) tag. That detail looks so unexpected to not making clear sense and should be considered as a hack. It is the reset src to empty before reassigning it to the next image source. Hence, the event handler should be written like this.
[tt]
<SCRIPT language="JavaScript" type="text/JavaScript">
[red]//[/red]<!-- [blue]what for? xhtml?, but still it is unclosed -->[/blue]
var speed=1333;
var counter=1;
function rollPics() {
var oimg=document.getElementsByName("display")[0]; //assumed existence
[red]oimg.src="";[/red] [green]//hack to make Chrome tempered[/green]
oimg.src=counter+".jpg"; //Display image "counter".jpg
counter++;
if (counter>29) {counter=1;};
}
[red]//[/red]<!-- END -->
</SCRIPT>
[/tt]
 
Upvote 0 Downvote
I'd go one step further... don't even bother cleaning this script up - replace it entirely. There are plenty of good javascript slideshow scripts to choose from. Choose one that already works in all browsers, uses valid HTML and JavaScript and has the features you need. I use and recommend it but there are many others out there if that doesn't do what you need. Editing other peoples javascript can be a good learning experience but boy can it waste time!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
931
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
448
lexer
lexer
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
209
Daniel K
Daniel K
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
413
rogerte
rogerte
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
160
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top