search

blueimp / Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
https://blueimp.github.io/Gallery/
Other
3.75k stars 983 forks source link

Response images #248

Closed drMonro closed 4 years ago

drMonro commented 4 years ago

Hello. Please, help to understand how work images response? I made image-link responsive working correct by using data-srcset and data-sizes via a attributes/

But i can't understand how to make responsive img - i'm tried to use tag , but when full screen linking starting working not correct (forever open first image)

I understand what documentation have article about response. But it don't have example about responsing images in markup.. 

                 <a
                    href="assets/img/desktop.jpg"

                    data-srcset="assets/img/desktop.jpg 800w,
                                         assets/img/mobile.jpg 500w"

                    data-sizes="(max-width: 767px) 500px, (max-width: 1200px) 800px"
                >
                    <img src="assets/img/example.jpg"/>
                </a>
blueimp commented 4 years ago

Hi @drMonro,

the data-srcset and data-sizes map 1:1 to HTML image properties srcset and sizes.

The README also links to documentation about responsive images.

Hope that helps!

blueimp commented 4 years ago

Closing this as resolved.