Start animation not working for SrcSets

[acwolff]

To test the animation from thumbnail to slide and back, I enlarged startAnimationDuration to 3000.

This time I did test it in case I use SrcSets, see this test album.

You see that the animations are only working for videos, iframes and panorama images where no SrcSets are used, but for normal images, like the first image, it is not working.

If SrcSets are used, the used image depends on the device you use, the used image is displayed in the center of the slide image. The file type used here are webp images, but also if I use only jpeg images, it is not working. It is also not working if I use no srcsets for the thumbnails and only jpeg srcsets for the slide images.

I use as html code for the first image:

<div id="thumbsgallery" class="thumbs-jg" >
<a class="gallery-item" id="s0" href="slides/Vecht_121027_1156.jpg" 
data-srcset="slides/Vecht_121027_1156-4032w.webp 4032w,slides/Vecht_121027_1156-2880w.webp 2880w,slides/Vecht_121027_1156-1440w.webp 1440w,slides/Vecht_121027_1156.jpg 1440w,slides/Vecht_121027_1156-720w.webp 720w" 
data-sub-html= '<p>Start aan de Grote Esweg.</p>'>
<img  srcset="thumbs/Vecht_121027_1156-853w.webp 853w,thumbs/Vecht_121027_1156-427w.webp 427w,thumbs/Vecht_121027_1156.jpg 427w"    src="thumbs/Vecht_121027_1156.jpg"
  width="213" height="160" alt="Start aan de Grote Esweg." title="Start aan de Grote Esweg." />
</a>

And for a panorama image, like the 11th thumbnail, where the animation is working I use this code:

<a class="gallery-item" id="s10" href="slides/Vecht_121027_1212-3.jpg" 
data-lg-size="3524-1080" data-sub-html= ''>
<img src="thumbs/Vecht_121027_1212-3.jpg" width="352" height="160" alt="" title="" />
</a>

Is this a bug or do I something wrongly?

[sachinchoolur]

Yes, you can pass multiple sizes to the data-lg-size attribute

Here is the demo - https://www.lightgalleryjs.com/demos/responsive/#using-zoomfromorigin-with-responsive-images

[acwolff]

@sachinchoolur thanks for your reply!

The slide aninimations to the next or previous slide did work in my case, but the thumbnail to slide and back animation did not work, because the slide dimensions were not defined.

I added these dimensions , for example for the first image:

<a class="gallery-item" id="s0" 
 href="slides/Vecht_121027_1156.jpg"
data-lg-size= "720-540-720, 1440-1080-1440, 1440-1080-1440, 2880-2160-2880, 3024-4032"
 data-srcset="slides/Vecht_121027_1156-4032w.webp 4032w,slides/Vecht_121027_1156-2880w.webp 2880w,slides/Vecht_121027_1156-1440w.webp 1440w,slides/Vecht_121027_1156.jpg 1440w,slides/Vecht_121027_1156-720w.webp 720w" 
 data-sub-html= 'Comment 1'>
<img     src="thumbs/Vecht_121027_1156.jpg"
  width="213" height="160" alt="Comment 1" title="Comment 1" />
</a>

and now are the thumbnail to slide and back animation working, see my test album

Some observations:

I use a srcset with images going from large to small with a keyword "data-srcset", which is differently from what you say in your documentation. I use this format also for other galleries (fancyBox and photoSwipe) and it seems to work aswell for your LightGallery!

As you see in this example, I use here Webp images which work fine in contrast what is said in issue #1374

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.