2011-09-21 34 views
0

我有一个PHP页面上的代码获取图像的文件名剥离扩展名,并删除前两个字符,然后将字符串添加到echo语句。我的问题是这个字符串正在加载幻灯片时显示。有没有办法做到这一点更好。这只发生在Firefox中的所有其他浏览器串心不是显示php echo在Firefox中显示substr

<?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 />'; 
} 
?> 

这里是完整的代码

<!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> 

回答

0

在javascript中的幻灯片,就像在jQuery或什么的?

我认为正在发生的事情是图像标记的替代文本正在图像加载之前显示。由于某种原因,你需要使用alt属性来获取值吗?你总是可以把它一个空字符串像ALT =“”

echo '<img src="'.$path.'" alt="" />'; 

如果不工作,或者你需要alt文本为是和使用的幻灯片是在JavaScript的jQuery或类似,另一种选择是用css隐藏幻灯片div,并且在幻灯片加载后有一个回调显示div。

echo '<div id="myslides" style="display:none">'; 
echo '<img src="'.$path.'" alt="" />'; 
echo '</div>'; 

这将保持它隐藏,直到你用javascript显示它。

如果幻灯片演示jQuery中,你只是想这样做幻灯片加载后(通过它知道它完成加载幻灯片库的回调):

// jQuery javascript 
$('#myslides').show(); 

需要了解更多详细信息确保您的幻灯片实施/ alt标签要求。

+0

这里是即时通讯在Joomla中使用的模块的完整代码。该幻灯片是与jQuery循环搭建的。图像通过php代码动态添加到幻灯片中。 alt标签将被添加,因为除了动态以外,没有其他方式为图像添加alt标签 –

0

我测试你的代码在3个浏览器(Chrome浏览器,火狐,歌剧)和所有的人给相同的结果:

<img src="/images//date-bg.gif" alt="te-bg.gif" />, <img src="/images//date-bg.gif" alt="te-bg.gif" /> ..... 

不需要结果吗?