Блог

Главная - Вопросы по программированию - jQuery: лайтбокс с графической надписью

jQuery: лайтбокс с графической надписью

#javascript #jquery

#javascript #jquery

Вопрос:

Это мой код:

 const lightbox = ["#lightbox"];

function show_lightbox(element) {
  show_lightbox_layer();
  if (element amp;amp; 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 видимым при нажатии на изображение. Он должен быть рядом с кнопкой закрытия.

Как это возможно сделать? И еще: как можно добавить «overflow: hidden» для слоя ниже, если лайтбокс открыт?

Был бы очень благодарен за помощь! <3

Ответ №1:

Вам нужно добавить figcaption внутри lightbox_content. На show_lightbox_layer вам нужно изменить HTML-содержимое figcaption.

Требуется новый стиль для оформления рисунка:

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