Problem with Php JQuery & Prototype.js

Hey guys,

I need help with a code problem:
Running Lampp on Ubuntu 10.04,
I have an index.php that runs:


<?
// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/pv/imgs"; // directory on server
$image_relative_path = '/pv/imgs'; // path to images relative to script
$file_types = array('jpg','jpeg','gif','png');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)
$GD_WORKAROUND = "newGD";//set this to "oldGD" or "newGD" to switch off automatic GD version detection
$image_rotation = "";

if($handle = opendir($image_dir)) {
	while (false !== ($file = readdir($handle))) {
	if ($file != "." && $file != "..") {
		$ext_bits = explode(".",$file); // finds file extensions
		foreach($ext_bits as $key => $value){
			if(in_array($value,$file_types)){
				$image_rotation .= '<li><img src="'.$image_relative_path.'/'.$file.'"></li>';
			}		
		}
	}
}
closedir($handle);
}

?>

<html>
<head>


<title>
</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript">
  function change_content(elementname, filename)
  {
    new Ajax.Updater(elementname, filename);
  }
</script>

</head>
<body>
<script>
jQuery.noConflict();
jQuery(document).ready(function() { 
	jQuery('#image_rotate').innerfade({ 
		speed: 'slow', 
		timeout: 4000, 
		type: 'sequence', 
		containerheight: '311px'
	});
});
</script>

<div id="container">

	<div id="page_title">
	<h1><span>AAA</span></h1>
	</div>


	<div id="left_column">

		<div id="page_image">
<ul id="image_rotate" style="list-style: none;">
	<?= $image_rotation; ?>
</ul> 
&nbsp</div>


The Php reads all the picture elemnts in a given folder and fades them in/out while rotating them.

THIS WORKS FINE!

Then follows:

		<div id="latestmarvel">
			<h2><span>Latest News</span></h2>

<p>Please check our <a href="" onclick="change_content('maincontent', 'content/[B]stgeorge.php[/B]');return false">Reccomended Sites</a>, because we add at least one great excavation site a month.</p>

		</div>


	</div>

That calls a DIV “maincontent” that get the changing pages of the site-the content.

One of those content pages stgeorge.php has a similiar image rotating function, that does not seem to work, can someone tell me what I’m doing wrong???


<?
// Global Variables
$loc_image_dir = "$_SERVER[DOCUMENT_ROOT]/pv/imgs/content"; // directory on server
$loc_image_relative_path = '/pv/imgs/content'; // path to images relative to script
$local_file_types = array('jpg','jpeg','gif','png');
$local_image_time = '4000'; // seconds each image will display (4000 = 4 seconds)
$GD_WORKAROUND = "newGD";//set this to "oldGD" or "newGD" to switch off automatic GD version detection
$loc_image_rotation = "";

if($handle = opendir($loc_image_dir)) {
	while (false !== ($file = readdir($handle))) {
	if ($file != "." && $file != "..") {
		$ext_bits = explode(".",$file); // finds file extensions
		foreach($ext_bits as $key => $value){
			if(in_array($value,$local_file_types)){
				$loc_image_rotation .= '<li><img src="'.$loc_image_relative_path.'/'.$file.'"></li>';
			}		
		}
	}
}
closedir($handle);
}

?>
<html>
<head>


<title>
</title>

<link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../js/jquery.innerfade.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>

<script type="text/javascript">
  function change_content(elementname, filename)
  {
    new Ajax.Updater(elementname, filename);
  }
</script>

</head>
<body>
<script>
jQuery.noConflict();
jQuery(document).ready(function() { 
	jQuery('#loc_image_rotate').innerfade({ 
		speed: 'slow', 
		timeout: 1000, 
		type: 'sequence', 
		containerheight: '300px'
	});
});
</script>

<h1>St. George's Monastery</h1>
<div id="main_image">
<ul id="loc_image_rotate" style="list-style: none;">
	<?= $loc_image_rotation; ?>
</ul> 
&nbsp</div>

I changed all the php var names so it does not conflict with the index.php.

Thanx.