I have some code on a php page that gets an image filename strips the extension and removes the first two characters and then adds the string to an echo statement. My problem is that this string is being displayed when a slideshow is loading. Is there any way to do this Better. This only occurs in firefox in all other browsers the string isnt displayed
<?php
try {
// Styling for images
echo "<div id=\"myslides\">";
$files = new DirectoryIterator($imageFolder);
$i=0;
$files_array = array();
foreach ($files as $fileinfo){
if ($fileinfo->isFile()){
$files_array[$i++]=$fileinfo->getFileName();
}
}
asort($files_array);
foreach ( $files_array as $file ) {
$path = $imageFolder . "/" . $file;
$fileBaseName=basename($path,".jpg");
$trimmed=substr($fileBaseName,2);
echo "<img src=\"" . $path . "\" alt=\"" . $trimmed . "\" />";
}
echo "</div>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
here is the full code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Michael Horsfall" />
<title>Exposure Slideshow</title>
<link rel="stylesheet" href="modules/mod_exposure_slideshow/css/style.css" type="text/css" media="screen" />
<script src="modules/mod_exposure_slideshow/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="modules/mod_exposure_slideshow/js/jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: '<?php echo $effectFx; ?>',
speed: <?php echo $speed; ?>,
timeout: 0,
nowrap: 1,
fit: 1,
pause: 2,
pager: '#navi'
});
$('#nav .next a').click(function(){
var nextClick = $('#navi a.activeSlide').next('a');
$(nextClick).click();
return false;
})
// back arrow
$('#nav .prev a').click(function(){
var prevClick = $('#navi a.activeSlide').prev('a');
$(prevClick).click();
return false;
})
});
</script>
<script type="text/javascript">
//<![CDATA]
$(function(){
// nav animation2
$('#nav_move').css({
width: 16,
height: 16
});
$('#navi a').click(function() {
var offset = $(this).offset();
var offsetbody= $('#nav').offset();
//find the offset of the wrapping div
$('#nav_move').animate({
width: $(this).width()+7,
height: 16,
left: (offset.left-offsetbody.left-1.2)
});
return false;
});
});
//]]>
</script>
</head>
<body>
<div id="container">
<h1>
<?php
try {
// Styling for images
echo "<div id=\"myslides\">";
$files = new DirectoryIterator($imageFolder);
$i=0;
$files_array = array();
foreach ($files as $fileinfo){
if ($fileinfo->isFile()){
$files_array[$i++]=$fileinfo->getFileName();
}
}
asort($files_array);
foreach ( $files_array as $file ) {
$path = $imageFolder . "/" . $file;
$fileBaseName=basename($path,".jpg");
$trimmed=substr($fileBaseName,2);
echo "<img src=\"" . $path . "\" alt=\"" . $trimmed . "\" />";
}
echo "</div>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
</h1>
</div>
<div id="nav" class="nav">
<span id="nav_move"></span>
<div id="navi" class="navi">
</div>
<div id="next" class="next">
<a id="next" href="#"></a>
</div>
<div id="prev" class="prev">
<a id="prev" href="#"></a>
</div>
</div>
</body>
</html>
