Jump to content

AJAX photo gallery works in IE, not in FF


twoweektrial

Recommended Posts

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.