It is possible not to use Dynamic Elements in Inline Mode?

[mumus]

It is possible not to use Dynamic Elements in Inline Mode, i need to make Inline Lightgallery from elements on html markup, for example:
<div class="inline-gallery-container">
<a href="image1.jpg" data-thumb="thumb1.jpg">
<img src="preview1.jpg" />
</a>
<a href="image2.jpg" data-thumb="thumb2.jpg">
<img src="preview2.jpg" />
</a>
</div>

[sachinchoolur]

Hey @mumus,

Sorry for the late response.
Here is the demo of inline mode without without using dynamic option - https://codepen.io/sachinchoolur/pen/qBmKgew

[mumus]

Thank u, but how to show thumbs?

[sachinchoolur]

Just include thumbnails plugin

import lgThumbnail from "https://cdn.skypack.dev/[email protected]/plugins/thumbnail";

// include CSS 
// https://cdn.jsdelivr.net/npm/[email protected]/css/lg-thumbnail.css

plugins: [lgZoom, lgThumbnail]

updated demo - https://codepen.io/sachinchoolur/pen/qBmKgew

[mumus]

Thank, but why Thumbnails src not working from data-thumb attribute?

[sachinchoolur]

Oh. There is an issue with the documentation. If you want to pass thumbnail image via data attribute, you need to use the exThumbImage option
Please take a look at the docs and let me know if you face any issues https://www.lightgalleryjs.com/docs/settings/#exThumbImage

[mumus]

Thank you very much. It's work fine!!!

[mumus]

Hello again. One more question, please.
It is possible to make three types of photos with different sizes, i mean.

1. separate image for thumbnails, for example 60x60 pixels ( exThumbImage, here is ok)
2. separate image for preview in inline not expanded mode, for example, 640x480
3. separate image for expanded gallery, for example 1600 and larger?

[sachinchoolur]

Nope. It is currently not possible to use separate images for inline mode and expanded mode.
lightGallery supports responsive images. Maybe you can try tweaking the srcset and sizes to get the desired behavior
https://www.lightgalleryjs.com/demos/responsive/
https://stackoverflow.com/questions/61296655/how-to-serve-image-size-based-on-container-not-screen-size

[mumus]

Thank u. And one more question. It is possible to change number of thumb in different breakpoints?
For example, i want only 3 thumbs in a row in mobile devices.

[sachinchoolur]

You can use mobileSettings
docs - https://www.lightgalleryjs.com/docs/settings/
Change the thumbWidth accordingly - https://www.lightgalleryjs.com/docs/settings/#thumbWidth