Photoswipe Lightbox отображает данные-атрибут data-lbwps-описание под миниатюрой

Я попытался отобразить переменную из атрибута ниже изображения в галерее с помощью javascript. Ниже одного элемента:

<div class="gallery-item">
  <a href="image-full.jpg" data-lbwps-description="example description">
    <figure>
      <img src="image-thumb.jpg">
      <figcaption class="description-image">
        "place to display data-lbwps-description"
      </figcaption>
    </figure>
  </a>
</div>

С помощью этого скрипта я могу получить переменную из атрибута данных

var desc = $(".gallery-item a").data("lbwps-description");
$('.description-image'). text(desc);

но переменная берется из первого элемента в галерее и помещается в каждый последующий div с классом Gallery-item. У меня есть разные переменные в описании data-lbwps в каждом div.

Как изменить функцию, чтобы взять переменную из data-lbwps-description и поместить ее в figcaption только в этом div и повторить это во всех элементах галереи?


javascript html jquery photoswipe
person chris49    schedule 26.05.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это работает:
HTML

<div class="gallery">
  <div class="gallery-item">
    <a href="image-full.jpg" data-lbwps-description="example description1">
      <figure>
        <img src="image-thumb.jpg">
        <figcaption class="description-image">place to display data-lbwps-description</figcaption>
      </figure>
    </a>
  </div>
  <div class="gallery-item">
    <a href="image-full.jpg" data-lbwps-description="example description2">
      <figure>
        <img src="image-thumb.jpg">
        <figcaption class="description-image">place to display data-lbwps-description</figcaption>
      </figure>
    </a>
  </div>
  <div class="gallery-item">
    <a href="image-full.jpg" data-lbwps-description="example description3">
      <figure>
        <img src="image-thumb.jpg">
        <figcaption class="description-image">place to display data-lbwps-description</figcaption>
      </figure>
    </a>
  </div>
</div>

И этот jquery:

$(".gallery-item").each(function( index, element){
    console.log( $(this).find('a').data('lbwps-description'));
    var desc = $(this).find('a').data('lbwps-description');
    $(this).find('.description-image').text(desc);
});
person Bernhard Beatus    schedule 26.05.2021