Grab image data-src open in lightGallery

Question

I need to get the data-src of the gallery’s open item, as the user advances the photos in the gallery, an input should be updated.

    <div class="item " data-src="assets/img/tour/-11521134609.jpg" data-sub-html="" style="position: absolute; left: 0px; top: 0px;">
        <img alt="" src="assets/img/tour/-11521134609.jpg"><br>
    </div>
        <div class="item " data-src="assets/img/tour/-445452345.jpg" data-sub-html="" style="position: absolute; left: 0px; top: 0px;">
            <img alt="" src="assets/img/tour/-445452345.jpg"><br>
        </div>
    <div class="item " data-src="assets/img/tour/-asdfasdfasdf.jpg" data-sub-html="" style="position: absolute; left: 0px; top: 0px;">
        <img alt="" src="assets/img/tour/-asdfasdfasdf.jpg"><br>
    </div>

    $(document).ready(function(){
        var $lg = $('#captions').lightGallery({
            mode: 'lg-fade',
                width: '800px',
                height: '700px',
                addClass: 'fixed-size',
                counter: false,
                startClass: '',
                enableSwipe: false,
                enableDrag: false,
                speed: 500,
                closable:true,
                download: false,
                share: false,
                thumbnail:false,
                autoplay: false,
                actualSize: false,
                fullScreen: false,
                zoom:false
        }); 
            $lg.on('onAfterSlide.lg', function (event ) {
                console.log( $lg.data('lightGallery').$items.eq(0).data('src') );
            });
    }); 

The return on the console is always being assets/img/tour/-11521134609.jpg which is the name of the first image.

Answer 1

Actually you don’t need to take the data-src, because the value of this attribute is the path of the image that will be displayed in the slider, so just take the src of the current image being displayed.

Now, as the component constructs the div dynamically in the slider, the event onAfterSlide.lg cannot have a perfect sync with this action, that is, the event can be fired before the component builds the div that displays the larger image.

In view of this, I saw the need to use a timer setInterval to check when the div that displays the image already exists.

The element built by the plugin is the div with the class .lg-current, so, after the event is triggered, just check within the interval if the element exists and print the src attribute of the displayed image.

See in the example below:

$(document).ready(function(){
  var $lg = $('#captions').lightGallery({
      mode: 'lg-fade',
          width: '800px',
          height: '700px',
          addClass: 'fixed-size',
          counter: false,
          startClass: '',
          enableSwipe: false,
          enableDrag: false,
          speed: 500,
          closable:true,
          download: false,
          share: false,
          thumbnail:false,
          autoplay: false,
          actualSize: false,
          fullScreen: false,
          zoom:false
  }); 
   $lg.on('onAfterSlide.lg', function (event ) {
      var timer = setInterval(function(){
         if($(".lg-current img").length){
            console.log($(".lg-current img").attr("src"));
            clearInterval(timer);
         }
      }, 100);
   });
}); 

.item{
   display: inline-block;
   width: 100px;
}

.item img{
   width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/css/lightgallery.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js"></script>
<div id="captions">
<div class="item " data-src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg?1" data-sub-html="">
        <img alt="" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"><br>
    </div>
        <div class="item " data-src="https://libraries.acm.org/binaries/content/gallery/acm/ctas/publications/nodes-764.jpg/nodes-764.jpg/acm%3Adesktopcta?2" data-sub-html="">
            <img alt="" src="https://libraries.acm.org/binaries/content/gallery/acm/ctas/publications/nodes-764.jpg/nodes-764.jpg/acm%3Adesktopcta"><br>
        </div>
    <div class="item " data-src="https://media-cdn.tripadvisor.com/media/photo-s/09/c2/5b/2a/nature-1-15-largejpg.jpg?3" data-sub-html="">
        <img alt="" src="https://media-cdn.tripadvisor.com/media/photo-s/09/c2/5b/2a/nature-1-15-largejpg.jpg"><br>
    </div>
</div>