Photoswipe Lightbox display data-attribute data-lbwps-description below thumbnail

Question

I've try display varible from attrubite below image in gallerywith javascript. Below one element:

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

With this script i can get the variable from data atribute

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

but the variable is taken from the first element in gallery and put into each subsequent div with class "gallery-item". I have different varible in data-lbwps-description in each div.

How change function to take varible from data-lbwps-description and put it to figcaption only in this div and repeat this in all gallery items?

Answer 1

This works:
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>

And this 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);
});