时间戳

首页 > 解决方案 > jQuery：带有 figcaption 的灯箱

javascript - jQuery：带有 figcaption 的灯箱

问题描述

这是我的代码：

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

标签： javascriptjquery

解决方案

您需要在 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>

推荐阅读