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 {

        display: block;

        position: absolute;

        top: 5px;

        left: 80px;

}

更新后的代码：

const lightbox = ["#lightbox"];

function show_lightbox(element) {

    show_lightbox_layer($(element).next().html());

    if (element && element.src) {

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

        img.src = element.src;

    }

}

function show_lightbox_layer(figCaptionContent) {

    const show_lightbox = lightbox.join();

    $(show_lightbox).show();

    $(show_lightbox).find('figcaption').html(figCaptionContent);

}

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 {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 50px;

    top: 0;

    left: 0;

    background-color: blue;

}

#lightbox_content figcaption {

    display: block;

    position: absolute;

    top: 5px;

    left: 80px;

}

#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>

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

        <img class="lightbox_item" />

    </div>

</div>