jQuery: Lightbox with figcaption

Question

这是我的代码：

const lightbox = ["#lightbox"];

function show_lightbox(element) {

  show_lightbox_layer();

  if (element && element.src) {

    const img = $("#lightbox img")[0];

    img.src = element.src;

  }

}

function show_lightbox_layer() {

  const show_lightbox = lightbox.join();

  $(show_lightbox).show();

}

function hide_lightbox_layer() {

  const hide_lightbox = lightbox.join();

  $(hide_lightbox).hide();

}

function back() {

  hide_lightbox_layer();

}

figure {

  width: 50%;

}

figcaption {

  display: none;

}

img {

  width: 100%;

}

#lightbox {

  display: none;

}

#lightbox_content {

  width: 100%;

  height: 100%;

  position: absolute;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 50px;

  top: 0;

  left: 0;

  background-color: blue;

}

#close_button {

  position: absolute;

  top: 5px;

  left: 5px;

}

.lightbox_item {

  width: auto;

  max-width: 100%;

  height: auto;

  max-height: 100%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<figure>

  <img onclick="show_lightbox(this)" src="https://live.staticflickr.com/6228/6323363648_49d638c7cd_b.jpg">

  <figcaption><i>This</i> is a title.</figcaption>

</figure>

<figure>

  <img onclick="show_lightbox(this)" src="https://www.dbz.de/imgs/112371537_3cac6df633.jpg">

  <figcaption>This is <i>another</i> title.</figcaption>

</figure>

<div id="lightbox">

  <div id="lightbox_content">

    <button id="close_button" onclick="back(this)">Close</button>

    <img class="lightbox_item" />

  </div>

</div>

如果单击图像，我想让 figcaption 可见。它应该在关闭按钮旁边。

这怎么可能呢？还有一件事：如果灯箱打开，如何为下面的图层添加“溢出：隐藏”？

非常感谢您的帮助！<3

Answer 1

您需要在 lightbox_content 中添加一个 figcaption。在show_lightbox_layer上，您需要更改 figcaption 的 html 内容。需要一种新的 figcation 样式：#lightbox_content figcaption {&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; top: 5px;&nbsp; &nbsp; &nbsp; &nbsp; left: 80px;}更新后的代码：const lightbox = ["#lightbox"];function show_lightbox(element) {&nbsp; &nbsp; show_lightbox_layer($(element).next().html());&nbsp; &nbsp; if (element && element.src) {&nbsp; &nbsp; &nbsp; &nbsp; const img = $("#lightbox img")[0];&nbsp; &nbsp; &nbsp; &nbsp; img.src = element.src;&nbsp; &nbsp; }}function show_lightbox_layer(figCaptionContent) {&nbsp; &nbsp; const show_lightbox = lightbox.join();&nbsp; &nbsp; $(show_lightbox).show();&nbsp; &nbsp; $(show_lightbox).find('figcaption').html(figCaptionContent);}function hide_lightbox_layer() {&nbsp; &nbsp; const hide_lightbox = lightbox.join();&nbsp; &nbsp; $(hide_lightbox).hide();}function back() {&nbsp; &nbsp; hide_lightbox_layer();}figure {&nbsp; &nbsp; width: 50%;}figcaption {&nbsp; &nbsp; display: none;}img {&nbsp; &nbsp; width: 100%;}#lightbox {&nbsp; &nbsp; display: none;}#lightbox_content {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; padding: 50px;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; background-color: blue;}#lightbox_content figcaption {&nbsp; &nbsp; display: block;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 5px;&nbsp; &nbsp; left: 80px;}#close_button {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 5px;&nbsp; &nbsp; left: 5px;}.lightbox_item {&nbsp; &nbsp; width: auto;&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; max-height: 100%;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><figure>&nbsp; &nbsp; <img onclick="show_lightbox(this)" src="https://live.staticflickr.com/6228/6323363648_49d638c7cd_b.jpg">&nbsp; &nbsp; <figcaption><i>This</i> is a title.</figcaption></figure><figure>&nbsp; &nbsp; <img onclick="show_lightbox(this)" src="https://www.dbz.de/imgs/112371537_3cac6df633.jpg">&nbsp; &nbsp; <figcaption>This is <i>another</i> title.</figcaption></figure><div id="lightbox">&nbsp; &nbsp; <div id="lightbox_content">&nbsp; &nbsp; &nbsp; &nbsp; <button id="close_button" onclick="back(this)">Close</button>&nbsp; &nbsp; &nbsp; &nbsp; <figcaption><i>This</i> is a title.</figcaption>&nbsp; &nbsp; &nbsp; &nbsp; <img class="lightbox_item" />&nbsp; &nbsp; </div></div>