为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery: Lightbox with figcaption

jQuery: Lightbox with figcaption

凤凰求蛊 2023-01-06 15:17:46

这是我的代码:


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


查看完整描述

1 回答

?
绝地无双

TA贡献1687条经验 获得超4个赞

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


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信