AJAX photo gallery works in IE, not in FF

twoweektrial · May 26, 2009

I have an image gallery that lets people navigate through images. The php file receiving the request returns a string like: 'one.jpg', 'two.jpg' etc. I'm not sure what the problem is, but if you can help I would appreciate it very much. I will post the js file and php file below.

JS:

function setup_gallery()
{
image_location = 0;
images = new Array();
xml = create_request_object();

xml.onReadyStateChange = state_action;
xml.open("GET", "scan_dir.php", true);
xml.send(null);

change_image(0);
}

function change_image(loc)
{
document.getElementById("display_image").src = "/images/show/"+images[loc];
}

function first()
{
image_location = 0;
change_image(image_location);
}

function last()
{
image_location = images.length;
change_image(image_location);
}

function next()
{
image_location++;
if(image_location > images.length)
{
	image_location = 0;
}
change_image(image_location);
}

function previous()
{
image_location--;
if(image_location < 0)
{
	image_location = images.length-1;
}
change_image(image_location);
}

function create_request_object()
{

/*
     	  create_request
  parameters: none
  returns AJAX object on success
  returns false on failure

  function creates an AJAX object and returns it.
*/

var xmlhttp;
if (window.XMLHttpRequest)
{
	//IE 7+, Firefox, Opera, Chrome, Safari
	xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
	//IE 5, 6
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
	alert("Your browser does not support AJAX! Please update your browser, or go to <a href='http://www.firefox.com'>firefox.com</a> to download an up-to-date browser.");
	return false;
}

return xmlhttp;
}

function state_action()
{
if(xml.readyState == 4 || xml.readyState == "complete")
{
	images = eval("["+xml.responseText+"]");
}
}

PHP

<?php
$dir='../images/show/';
$ftype='jpg';
$files=scandir($dir);
$jpg="";
foreach($files as $f)
{
$file=$dir."/".$f;
if(!is_dir($file))
{
	$type=end(explode(".", $file));
	if($type == $ftype)
	{
		$nf=str_replace(" ", "&&|", $f);
		$jpg .= "'$nf' ";
	}
}
}
$jpg=trim($jpg);
$jpg=str_replace(" ", ", ", $jpg);
$jpg=str_replace("&&|", " ", $jpg);
echo $jpg;

?>

And here is the html file just in case

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

<html>
<head>

<title>ByteCannon Web Design - Demo Art</title>

<meta name="keywords" content="Bytecannon, Bytecannon Web Design, web design, web, design, custom web design, custom, san luis"></meta>
<meta name="synonyms" content="Byte Cannon, slo"></meta>
<meta name="author" id="author" content="ByteCannon Web Design"></meta>

<link rel="stylesheet" type="text/css" href="/style.css" />

<script type="text/javascript" src="/js_frame/prototype.js"></script>
<script type="text/javascript" src="/js_frame/scriptaculous.js"></script>
<script type="text/javascript" src="gallery.js"></script>

</head>

<body onload="setup_gallery()">

<div id='nav'>
    <ul>
        <li>
            <a href='/' title='Return to the homepage'>Home</a>
        </li>
        <li>
            <a href='/pricing/' title='A general reference to Bytecannon Prices'>Prices</a>
</li>
<li>
	<a href="/art/" title="Demo page art.">Demo Art</a>
        </li>
        <li>
            <a href='/contact/' title='Contact Via Web Based E-mail or by Phone'>Contact</a>
        </li>
    </ul>
</div>
<div id="banner" title="ByteCannon Web Design">
</div>

<div id='main'>

<div id="photo_display">
<img id="display_image" src="/images/gallery/bg.jpg" alt="ByteCannon Web Design" /></div>

<div id="photo_nav">
<img onClick="first();" src="/images/first.jpg" alt="First" />
<img onClick="previous();" src="/images/prev.jpg" alt="Prev" />
<img onClick="next();" src="/images/next.jpg" alt="Next" />
<img onClick="last();" src="/images/last.jpg" alt="Last" />
</div>

</div>

</body>
</html>

Thanks for your help in advance

rv20 · May 26, 2009

Run it through IE script debugger and see where it stops.

twoweektrial · May 26, 2009

The script doesn't stop in IE, and firebug isn't giving any errors : (

[email protected] · June 2, 2009

I sort of remember reading somewhere that Internet Explorer supports more older HTML code than the newer browsers do. So maybe check to see if it is the HTML that is generated that is causing the problem. Maybe validate the page? Just a thought.

Sign In

AJAX photo gallery works in IE, not in FF

Recommended Posts

twoweektrial

Link to comment

Share on other sites

rv20

Link to comment

Share on other sites

twoweektrial

Link to comment

Share on other sites

[email protected]

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information