咨询：如何将jQuery Lightbox Gallery标题框移至图片下方

Hey there! As someone new to CSS and jQuery, I’ll walk you through a straightforward way to move that title box from the top to the bottom of your Lightbox gallery—so it stops covering your images.

Step 1: Locate the title box’s CSS selector #

First, use your browser’s developer tools (press F12, then right-click the title box and select "Inspect"). You’ll find the title has a class like .lb-caption or .lightbox-caption (this depends on the specific Lightbox you’re using, but .lb-caption is common for this gallery).

Step 2: Override the CSS positioning #

Add this custom CSS to your website’s stylesheet (or a <style> tag in your HTML):

/* Target the title box */
.lb-caption {
  position: absolute;
  bottom: 0; /* Anchor to the bottom instead of top */
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8); /* Keep the semi-transparent background for readability */
  padding: 10px;
  color: #ffffff;
  /* Remove any existing top positioning or transforms that push it up */
  top: auto !important;
  transform: none !important;
}

Step 3: Adjust the gallery container to avoid cropping #

The title might get cut off if the gallery container doesn’t have enough bottom space. Add this to make room:

.lb-container {
  padding-bottom: 45px; /* Adjust this value based on how tall your title is */
}

Step 4: Fix any jQuery-driven positioning (if needed) #

Some Lightboxes use jQuery to dynamically set the title’s position. If the CSS above doesn’t work, look for code in your Lightbox JS file that looks like this:

$('.lb-caption').css('top', '0');

Change it to:

$('.lb-caption').css('bottom', '0');

Pro tip: If your custom CSS isn’t taking effect, add a parent selector to increase specificity (e.g., .lightbox .lb-caption instead of just .lb-caption).

内容的提问来源于stack exchange，提问作者Ghost Wheel