Using PHP with image directory multiple times

[rmoya]

I am very new to php. I am using a php code to use a image directory to fade image in and out. I need to be able to use the same code but for different directories on the same page.

<?
// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/trinity_cyclery2011/bmx/images/mirraco"; // directory on server
$image_relative_path = '/trinity_cyclery2011/bmx/images/mirraco'; // path to images relative to script
$file_types = array('jpg','jpeg','gif','png');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)

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);
}

?>
<?
// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/trinity_cyclery2011/bmx/images/fitbike"; // directory on server
$image_relative_path = '/trinity_cyclery2011/bmx/images/fitbike'; // path to images relative to script
$file_types = array('jpg','jpeg','gif','png');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)

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_fit .= '<li><img src="'.$image_relative_path.'/'.$file.'"></li>';
		}		
	}
}
}
closedir($handle);
}

?>

 

and this goes in the document.

 

        

          <script>
$(document).ready(function() { 
$('#image_rotate').innerfade({ 
	speed: 'slow', 
	timeout: 4000, 
	type: 'sequence', 
	containerheight: '220px'
});
});
</script>


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

          





        <script>
$(document).ready(function() { 
$('#image_rotate').innerfade({ 
	speed: 'slow', 
	timeout: 4000, 
	type: 'sequence', 
	containerheight: '220px'
});
});
</script>


<ul id="image_rotate" style="list-style: none;">
<?= $image_rotation_fit; ?>
</ul> 
          

 

any help will be greatly appreciated. Thanks

[rmoya]

I am using this jquery image fader http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

I got the first picture to work but the second one just shows all of the pictures and is not rotating images.

[marcus]

This isn't a PHP problem. Avoid using the same ID multiple times. You have "#image_rotate" used twice, jQuery is going to confuse itself. If you want to use a layer multiple times make it a class. I would suggest renaming both IDs to something like.

 

<ul id="gallery1">

 

and

 

<ul id="gallery2">

 

Then you should be able to use

$('#gallery1, #gallery2')

in your jQuery script.

[rmoya]

I am trying to use what you put but it doesn't seem to work correctly. I know I must be not putting something correctly.

 

Here is what I am putting. I also tried it exactly the way you had it and it didn't work.

<?
// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/trinity_cyclery2011/bmx/images/mirraco"; // directory on server
$image_relative_path = '/trinity_cyclery2011/bmx/images/mirraco'; // path to images relative to script
$file_types = array('jpg','jpeg','gif','png');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)
$id = ('gallery1');
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);
}

?>
<?
// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/trinity_cyclery2011/bmx/images/fitbike"; // directory on server
$image_relative_path = '/trinity_cyclery2011/bmx/images/fitbike'; // path to images relative to script
$file_types = array('jpg','jpeg','gif','png');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)
$id = ('gallery2');
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);
}

?>

 

and this is on the page.

         <script>  
$(document).ready(function() {   
    $('#image_rotate').innerfade({   
        speed: 'slow',   
        timeout: '4000',   
        type: 'sequence',   
        containerheight: '220px'  
    });  
});  
</script>  
<ul id="gallery1" style="list-style: none outside none;">  
    <?= $image_rotation; ?>  
</ul>