Responsive Image Gallery

Create beautiful responsive html image gallery with lightGallery. You can provide different images for different screen sizes, resolution or devices. Other than it's own mechanism, lightGallery supports HTML5 picture tag, srcset and sizes for responsive images.

Demo

For cress browser responsive image support, lightGallery accepts a comma separated list of images sources, each with a max width descriptor for displaying different images for different screen sizes. For modern browsers you can use native srcset and sizes attributes. Please refer the next demo.

JS demo
React demo
HTML Structure 
<!-- above 757px default href/data-src will be used -->
<div
    id="responsive-images-demo"
    data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757"
    data-src="img/img.jpg"
>
    <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-demo'));

HTML5 srcset and sizes

You can use native srcset and sizes attributes in lightGallery. Pass srcset and sizes via data-srcset and data-sizes attributes respectively. lightGallery will automatically create image with srcset and sizes.

lightGallery will automatically call picturefil library if it is available

View on CodePen
HTML Structure 
<div id="lg-srcset-demo">
    <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('lg-srcset-demo'));

HTML5 picture tag

The <picture> tag gives web developers more flexibility in specifying image resources. lightGallery will construct picture element if data-sources attribute is specified. You can specify sources in the form of an array of picture source objects.

For example, if you want to construct picture element in lightGallery as shown bellow,

<picture>
    <source media="(min-width:620px)" srcset="img/image-medium.jpg" />
    <source media="(min-width:480px)" srcset="img/image-small.jpg" />
    <img src="img/image-x-small.jpg" alt="images" />
</picture>

You need to use data-source (or sources if you are using dynamic mode) as shown below.

<div>
    <a
        data-src="img/image-x-small.jpg"
        data-sources='[{"srcset": "img/image-medium.jpg", "media":"(min-width:620px)"}, {"srcset": "img/image-small.jpg", "media":"(min-width:480px)"}]'
    >
        <img alt="thumb" src="img/thumb.jpg" />
    </a>
    ...
</div>

Similarly you can pass all supported attributes in the form of an object

If you want to provide webp for supported browsers with jpg fallback image, You can use data-sources in the following way

<div>
    <a
        data-src="/img/img-1.jpg"
        data-sources='[{"srcset": "/img/img-1.webp", "type":"image/webp"}]'
    >
        <img alt="thumb" src="img/thumb.jpg" />
    </a>
    ...
</div>
View on CodePen

Using zoomFromOrigin with responsive images

If you want to use zoomFromOrigin option with responsive images, You can provide specific lg-size values for specific screen size by providing a comma separated list of sizes combined with a max-width (up to what size the particular image should be used)

For example, if you have similar html structure,

<div>
    <a
        data-lg-size="240-160-375, 400-267-480, 1600-1067"
        data-responsive="/img/img-240.jpg 375, /img/img-400.jpg 480"
        data-src="/img/img-1600.jpg"
    >
        <img alt="thumb" src="img/thumb.jpg" />
    </a>
    ...
</div>

Up to 375 width, img.240.jpg and lg-size 240-160 will be used. Similarly, up to 480 pixel width, size 400-267 and img-400.jpg will be used. And above 480, lg-size 1600-1067 and img-1600.jpg will be used

Edit this page on GitHub

← Hash
Mixed contents →