php echo displaying substr in firefox
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 /&g开发者_开发百科t;';
}
?>
</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>
Is the slideshow in javascript, like in jQuery or something?
I think what is happening is the alt text of the image tag is being displayed before the image loads perhaps. Do you need the alt attribute to have a value for some reason? You could always leave it a blank string like alt=""
echo '<img src="'.$path.'" alt="" />';
If that doesn't work, or you need the alt text as is and your slideshow is in javaScript using jQuery or similar, another option is to hide the slideshow div with css, and have a callback from after the slideshow is loaded show the div.
echo '<div id="myslides" style="display:none">';
echo '<img src="'.$path.'" alt="" />';
echo '</div>';
which will keep it hidden until you show it in javascript.
If the slideshow is in jQuery, you would just want to do this after the slideshow is loaded (through a callback of the slideshow library that knows it is done loading):
// jQuery javascript
$('#myslides').show();
Need more details about your slideshow implementation / alt tag requirements to be sure.
I tested your code in 3 browsers(Chrome, Firefox, Opera) and all ones give same result:
<img src="/images//date-bg.gif" alt="te-bg.gif" />, <img src="/images//date-bg.gif" alt="te-bg.gif" /> .....
Is it not needed result?
加载中,请稍侯......
精彩评论