如何在Lightbox圖庫中將圖像置於圖像下方？

Question

我正在嘗試在this site的每個圖像下面放置文本，但我遇到了問題。

每當我嘗試在div中放置圖像時，它都會打開lightbox圖庫。

這裏是我的照片庫代碼：

<?php 
class struct 
{ 
    function imageDisplayGallery($img_folder_path) 
    { 
     //lists all files with _thumbs in folder. stores letter number as key in array called $numbers, and thumbnail as value 
     $numbers=array(); 
     foreach(glob("$img_folder_path*/*_thumb.jpg") as $thumb) 
     { 
      $thumb=str_replace("%2F","/",urlencode($thumb)); 
      $thumb=str_replace("+"," ",$thumb); 
      $int=explode("/",$thumb)[3].explode("/",$thumb)[4]; 
      $int=str_replace("Letter %23","",$int); 
      $int=str_replace("_thumb.jpg","",$int); 
      $numbers[$int]=$thumb; 
     } 

     //generate code to display image and thumb 
      foreach($numbers as $key => $thumb) 
     { 
      $full=str_replace("_thumb","",$thumb); 
      echo '<a href="',$full,'" data-lightbox="roadtrip"><img src="',$thumb,'" /></a>'; 
      echo "$key"; 
     } 
     echo '<div class="clear"></div>'; 
    } 
} 
?> 

Answer 1

嘗試這種設置每個項目。它使用CSS flex佈局將圖像和文本排列在一列中。文本被包裹在span元素中並放置在錨元素中。

a { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    margin: 10px; 
 
}

<a href="#" data-lightbox="roadtrip"><img src="http://www.germanwarletters.com/img/letter_images/Chapter11IntotheAbyss/Letter%20%23%20445/A_thumb.jpg" /><span>445A</span></a> 
 
<a href="#" data-lightbox="roadtrip"><img src="http://www.germanwarletters.com/img/letter_images/Chapter11IntotheAbyss/Letter%20%23%20445/A_thumb.jpg" /><span>445A</span></a> 
 
<a href="#" data-lightbox="roadtrip"><img src="http://www.germanwarletters.com/img/letter_images/Chapter11IntotheAbyss/Letter%20%23%20445/A_thumb.jpg" /><span>445A</span></a> 
 
<a href="#" data-lightbox="roadtrip"><img src="http://www.germanwarletters.com/img/letter_images/Chapter11IntotheAbyss/Letter%20%23%20445/A_thumb.jpg" /><span>445A</span></a>

jsFiddle demo