lightGallery version 2 has been released. Please upgrade

# Responsive images

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

    $('#responsive-images').lightGallery();

## 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

    $('#srcset').lightGallery();

## More demos

Thumbnails
Youtube/Vimeo Videos
HTML5 Videos
Transitions
Dynamic
Events
Methods
Iframe
Captions
Responsive
fixed Size
Html Markup
Comment box
Easing
Hash plugin
Share