2016-09-30 15 views
0

キャプションとサムネイルで画像を表示しようとしています。私は画像を表示することができますが、キャプションとして画像ファイル名を表示するのが難しいと思っています。以下はPHPを使用して完全な画像パスから画像名を取得

私のコードです:

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

<script> 
    var slideIndex = 1; 
    showDivs(slideIndex); 
    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"; 
    } 
</script> 

答えて

1

キャプションセットtitle属性を表示します。タイル属性にイメージの名前を設定します。

画像利用のフルパスからbasename($num)

をイメージ名を取得するには、以下を使用してPHPコードを交換してください。

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

ループ内のコードの下にあるすべての画像場所のファイル名を拡張子なしで取得します。そして、画像名を表示したい場所に$filenameという変数を置きます。

$filenamewithextension = basename($num); 
$fileextenstion = pathinfo($filenamewithextension, PATHINFO_EXTENSION); 
$filename = basename($num,$fileextenstion); 
$filename = trim(preg_replace('/[0-9]+/', '', $filename)); 
+0

すぐに回答ありがとうございました。それはまだ表示されていませんが、私は画像の上にマウスポイントを移動すると、私は画像ファイル名を見ることができた1つの変更とその。 – HebleV

+0

変更後、マウスでファイルキャプションを取得できますか?私の知る限りでは、タイトルを取得するには、HTML属性を設定する必要があります。タイトル属性に設定されている画像のキャプション名に画像名を表示する必要があります。 –

+0

を追加した後、このalt = "'。basename($ num)。" "title ="'。basename($ num)。マウスオーバーでの表示 – HebleV

関連する問題