lightGallery: Responsive

Want to provide different images for different viewports?. just specify the source of your images and viewport max width inside data-responsive attribute. lightgallery also supports the html5 srcset attribute for displaying high-resolution images.

HTML structure

<!-- above 757px default href/data-src will be used -->                        
<div id="responsive-images" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg" data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2-757.jpg 757">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

Javascript

lightGallery(document.getElementById('responsive-images'));

Responsive images with html5 `srcset`

Pass srcset and sizes via data-srcset and data-sizes attributes respectively. lightgallery will create image with srcset for you.

Browser support

If you want srcset to be supported for older browser please include picturefil javascript library in your document.

`srcset` and `sizes` attributes

To know more about srcset and sizes i'd recommend you to read the following post by Eric Portis: Srcset and Sizes.

HTML structure

<div id="srcset">
  <a href="img/img1.jpg" data-srcset="img/1-375.jpg 375w, img/1-480.jpg 480w, img/1-757.jpg 757w" data-sizes="(min-width: 40em) 80vw, 100vw">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg" data-srcset="img/2-375.jpg 375w, img/2-480.jpg 480w, img/2-757.jpg 757w" data-sizes="(min-width: 40em) 80vw, 100vw">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

Javascript

lightGallery(document.getElementById('srcset'));

Responsive images

HTML structure

Javascript

Responsive images with html5 srcset

Browser support

srcset and sizes attributes

HTML structure

Javascript

More demos

Responsive images with html5 `srcset`

`srcset` and `sizes` attributes