2016-09-30 10:43
浏览 263


I am trying to display an image with a caption and thumbnails. I am able to display the picture but I am finding difficult to display the image file name as caption.

Below is my code:

$files = glob("images/Friends/*.*");
for ($i=0; $i<count($files); $i++)
    $num = $files[$i]; 
    echo '<div class="w3-content" style="max-width:800px;position:relative;padding-top:0px;">';
    echo '<div class="w3-display-container mySlides">';
    echo '<div class="col s12 m6 l12">';
    echo '<div class="page4">';
    echo '<img src="'.$num.'" height="750" width="780" alt="random image" class="responsive-img" >'."&nbsp;&nbsp;";    
    echo '</div>';
    echo '</div>';
    echo '<a class="w3-btn-floating w3-hover-dark-grey"    style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>';
    echo '<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>';
    echo '</div>';
    echo ' </div>';

    var slideIndex = 1;
    function plusDivs(n) {
        showDivs(slideIndex += n);
    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {slideIndex = 1}
        if (n < 1) {slideIndex = x.length}
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        x[slideIndex-1].style.display = "block";

图片转代码服务由CSDN问答提供 功能建议

我正在尝试显示带有标题和缩略图的图像。 我能够显示图片,但我发现难以将图像文件名称显示为标题。


 $ files = glob(“images / Friends /*.*”  ); 
for($ i = 0; $ i&lt; count($ files); $ i ++)
 $ num = $ files [$ i];  
 echo'&lt; div class =“w3-content”style =“max-width:800px; position:relative; padding-top:0px;”&gt;'; 
 echo'&lt; div class =“w3-  display-container mySlides“&gt;'; 
 echo'&lt; div class =”col s12 m6 l12“&gt;'; 
 echo'&lt; div class =”page4“&gt;'; 
 echo'&lt;  img src =“'。$ num。'”height =“750”width =“780”alt =“random image”class =“responsive-img”&gt;'。“&amp; nbsp;&amp; nbsp;”;  
 echo'&lt; / div&gt;'; 
 echo'&lt; / div&gt;'; 
 echo'&lt; a class =“w3-btn-floating w3-hover-dark-grey”style =“position: 绝对;顶部:45%;左:0“onclick =”plusDivs(-1)“&gt;❮&lt; / a&gt;'; 
 echo'&lt; a class =”w3-btn-floating w3-hover-dark  -grey“style =”position:absolute; top:45%; right:0“onclick =”plusDivs(1)“&gt;❯&lt; / a&gt;'; 
 echo'&lt; / div&gt;'; 
  echo'&lt; / div&gt;'; 
&lt; script&gt; 
 var slideIndex = 1; 
 function plusDivs(n){
 showDivs(slideIndex + = n); 
 function showDivs(n){  
 var i; 
 var x = document.getElementsByClassName(“mySlides”); 
 if(n&gt; x.length){slideIndex = 1} 
 if(n&lt; 1){slideIndex = x.length  } 
 for(i = 0; i&lt; x.length; i ++){
x [i] .style.display =“none”; 
 [slideIndex-1] .style.display =“block  “; 
&lt; / script&gt; 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongmi4720 2016-09-30 10:49

    To show caption set title attribute. And set name of image in tile attribute.

    To get Image name from fullpath of Image use basename($num)

    Please replace your php code with below.

    echo '<img src="'.$num.'" height="750" width="780" alt="'.basename($num).'" title="'.basename($num).'" class="responsive-img" >'."&nbsp;&nbsp;"; 

    To get filename without extension for every image place below code in loop. And place $filename variable where you want to display image name.

    $filenamewithextension = basename($num);
    $fileextenstion = pathinfo($filenamewithextension, PATHINFO_EXTENSION);
    $filename = basename($num,$fileextenstion);
    $filename = trim(preg_replace('/[0-9]+/', '', $filename));
    点赞 打赏 评论

相关推荐 更多相似问题