Question

所以我使用Lightbox - Lokesh Dhakar，我连续3张图片，当我点击它们时，它会打开一个灯箱。事情是我只有一个简单的图像，我想在它下面添加一个标题。灯箱打开时（我已经有灯箱）但在灯箱打开前图片下方有一个标题，这不是标题。

这是代码的代码

<body> 
    <h1>
        <a href="index.html">
        <img class="logo" src="../img/nota.png">
        </a>
    </h1>
<hr>

<section>
<nav>
    <li><a href="index.html" class="button">ARTWORK</a></li>
    <li><a href="logos.html" class="button">LOGOS</a></li>
    <li><a href="other.html" class="button">OTHER</a></li>
    <li><a href="contact.html" class="button">CONTACT</a></li>
</nav>
</section>

    <div class="imgcontainer">
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1" data-title="CENA:"><img class="artworkimg" src="../img/car.jpg"></a>
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1"><img class="artworkimg" src="../img/car.jpg"></a>
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1"><img class="artworkimg" src="../img/car.jpg"></a>
    <script src="../js/lightbox.js"></script>
    <script>
    lightbox.option({'showImageNumberLabel': false})
</script>
    </div>
</body>

我曾尝试过将p添加到某些地方，但似乎无法弄明白。

Answer 1

您应该可以按照我在下面的代码段中执行的步骤添加标题。

我在span内嵌入了标题内容.lightboximage。要在图像下方显示，我使用了flexbox属性。

.lightboximage  {
display: inline-flex;
flex-direction: column;
text-decoration: none;
}

.caption {
  font-family: sans-serif;
  color: black;
  font-weight: bold;
  display: inline-block;
  padding-top: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.js"></script>


<div class="imgcontainer">
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
  <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">     <img class="artworkimg" src="https://unsplash.it/200x200">
    <span class="caption">My Caption</span>
  </a>
</div>

如何在图像下方添加标题（该图像用于灯箱）

1 个答案: