Response title
This is preview!
Php, JQuery & prototype.js
in Using jQuery
•
11 years ago
Hey guys,
I need help with a code problem:
Running Lampp on Ubuntu 10.04,
I have an index.php that runs:
Code:
- <?
// 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>
 </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:
Code:
- <div id="latestmarvel">
<h2><span>Latest News</span></h2>
<p>Please check our <a href="" onclick="change_content('maincontent', 'content/stgeorge.php');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???
Code: stgeorge.php
<?
// 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>
 </div>
I changed all the php var names so it does not conflict with the index.php.
stgeorge.php does not rotate the pictures, it does read them but its missing some function.
what I'm doing wrong???
Thanx.
1
