Images randomly not displaying in IE/FF -- Help!

Discussion in 'JavaScript' started by Swayze, Jun 2, 2009.

0
  1. #1
    I'm trying to create a simple image viewer, when you click "next" or "previous" the next or previous picture appears. This code words fine locally, but when I try to upload it to the server some pictures randomly don't work (and it's completely random which ones work and which ones don't). I'm pretty new to JavaScript and have NO IDEA what is going on. In Firefox, nothing is displayed and in IE a red x box is displayed.

    The URL is : http://www.stephaniesmartt.com/login_success.html

    Here's the code:
    (Note: I abbreviated the two arrays to save space)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Stephanie Smartt | Fall 2009 Pictures</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">
var currImage = 0;
var comments = new Array();
comments[0] = "Pastel Pretty	130JK01	Light Grey	$475	Melange Twill Jacket w/ Asymmetrical Overlap<br />Pastel Pretty	130PT01	Light Grey	$295	Wide Leg Flat Front Pant	(Use #15)<br />";
.
.
.
comments[73] = "";


var doncasterImages = new Array();
doncasterImages[0] = "<img src=\"http://lh5.ggpht.com/_sxrD7-oWRnw/SiE16h_ZblI/AAAAAAAAAB0/WAJhVFeDG1g/s912/100_1188.jpg\" />";
.
.
.
doncasterImages[73] = "<img src=\"http://lh3.ggpht.com/_sxrD7-oWRnw/SiE2xto3LLI/AAAAAAAAAHE/FehpEAfLRoQ/s912/100_1424.JPG\" />";



window.onload = function() {
document.getElementById("commentbox").innerHTML = comments[currImage];
document.getElementById("betterPictures").innerHTML = "<img src=\"http://lh5.ggpht.com/_sxrD7-oWRnw/SiE16h_ZblI/AAAAAAAAAB0/WAJhVFeDG1g/s912/100_1188.jpg\"/>";
}

function NextImage()
{

	currImage=(currImage+1) % doncasterImages.length;
	document.getElementById("betterPictures").innerHTML = doncasterImages[currImage];
	document.getElementById("commentbox").innerHTML = comments[currImage];
}

function PrevImage()
{
	currImage=((currImage-1) + doncasterImages.length) % doncasterImages.length;
	document.getElementById("betterPictures").innerHTML  = doncasterImages[currImage];
	document.getElementById("commentbox").innerHTML = comments[currImage];
}
</script>
</head>

<body oncontextmenu="return false;">

<br />
<br />

<div id="wrapper">

		<div class="entry-title"><a>Welcome!</a></div><br />
        
        <div align="center">
          <input type="button" value=" << Previous " onclick="javascript:PrevImage();" />
          <input type="button" value=" Next >> " onclick="javascript:NextImage();" />
          
  </div>
        <br />
        <div id="commentbox" style="padding-left:10px;">&nbsp;</div>
        <br />
        <br />
        <div id="betterPictures" align="center">&nbsp;</div>
        

</div>
</body>
</html>
    Code (markup):
    Thanks for the help in advance!
     
    Swayze, Jun 2, 2009 IP
  2. Swayze

    Swayze Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Figured it out--basically I was using Google's Picassa to host the images. Apparently, Picassa doesn't like it when Javascript tries to access images (they work when you type in the URL directly). I've switched to Flickr and everything works.

    Thanks to anyone who spent time thinking about this.
     
    Swayze, Jun 2, 2009 IP