CODEWITHSUNDEEP
phphtmlcsslightbox
Rilcon42
Rilcon42

Reputation: 9763

How to center text below image in lightbox gallery?

I am trying to center the text below each image on this site but I am running into issues.

Every time I try to put an image in a div it breaks the lightbox gallery.

Here is my photo gallery generation code:

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

Upvotes: 1

Views: 238

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371271

Try this set-up for each item. It uses CSS flex layout to arrange the image and text in a column. The text is wrapped in a span element and placed inside the anchor element.

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

Upvotes: 1

Related Questions