# Is there such a thing as a TRUELY responsive lightbox? **URL:** \ **Category:** Help\ **Created:** [March 16, 2017, 2:13pm UTC](https://talk.jekyllrb.com/t/is-there-such-a-thing-as-a-truely-responsive-lightbox/319 "2017-03-16T14:13:59Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![lenzjo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/lenzjo/32/115_2.png) [@lenzjo](https://talk.jekyllrb.com/u/lenzjo)\ **Post date:** [March 16, 2017, 2:13pm UTC](https://talk.jekyllrb.com/t/is-there-such-a-thing-as-a-truely-responsive-lightbox/319/1 "2017-03-16T14:13:59Z")
I’m tired of searching for this elusive beast! Just about all lightboxes CLAIM to be responsive, BUT what they mean is they will fit an image and some control btns to the size of the screen. That’s nice, we want to be able to see the image 😉 What they all miss is, as far as I can see, is that the image itself is not really responsive it’s just been resized. So a mobile, tablet or monitor will all be viewing the SAME image. Some lightboxes support displaying an alternative retina image. This makes it even worse for the poor mobile viewer if they have a high-density screen. I thought it would be an obvious feature, to be able to show responsive images. Do you guys know of such a plugin or even bare code that will acomplish this? I don’t need gallery capability, just individual images and possibly video as well. ---
**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\ **Post date:** [March 16, 2017, 8:42pm UTC](https://talk.jekyllrb.com/t/is-there-such-a-thing-as-a-truely-responsive-lightbox/319/2 "2017-03-16T20:42:37Z")
I came across this proof of concept on Codepen that supports images with `srcset`, which is what you need to handle responsively sized images. Looked at the code really quick and not sure if it just does 1x and 2x sized images or if you can go to town and define a whole array of image sizes. https://codepen.io/dudleystorey/embed/preview/LEBjyL?height=300&slug-hash=LEBjyL&default-tabs=css,result&host=https://codepen.io&embed-version=2 ---
**Author:** ![lenzjo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/lenzjo/32/115_2.png) [@lenzjo](https://talk.jekyllrb.com/u/lenzjo)\ **Post date:** [March 16, 2017, 11:03pm UTC](https://talk.jekyllrb.com/t/is-there-such-a-thing-as-a-truely-responsive-lightbox/319/3 "2017-03-16T23:03:27Z")
thx @mmistakes It looks like it only does 1x & 2x… Not sure if it can be expanded, might play with it tomorrow to see how it really works as I’m not getting what I expect running it in codepen. I have been playing with lity today as it was one of the few ligtboxes that I could get running and was basic enough for my needs. The basic setup is: \    \“alt-text”\ \ The thumbnail\_image was easy enough to do with the \ tag and source srcset’s, it is the large\_image bit that is proving difficult for me. This evening a thought hit me, that if I could detect a break-point in JS then I could use the click handler to modify the \'s src. I just found [this article](https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript) on detecting css breakpoints in JS. It’s getting late here now, so I will persue this further tomorrow. ---
**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\ **Post date:** [March 16, 2017, 11:06pm UTC](https://talk.jekyllrb.com/t/is-there-such-a-thing-as-a-truely-responsive-lightbox/319/4 "2017-03-16T23:06:52Z")
Here’s a more fleshed out example with documentation. > **[blinkcursor/mv-gallery](https://github.com/blinkcursor/mv-gallery)** > > The simplest lightbox gallery using srcset & sizes for responsive images - blinkcursor/mv-gallery ---
**Author:** ![lenzjo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/lenzjo/32/115_2.png) [@lenzjo](https://talk.jekyllrb.com/u/lenzjo)\ **Post date:** [March 18, 2017, 10:27pm UTC](https://talk.jekyllrb.com/t/is-there-such-a-thing-as-a-truely-responsive-lightbox/319/5 "2017-03-18T22:27:46Z")
Not ignoring you @mmistakes, I had a look at the mv-gallery, way more than I needed but it pointed me in a different direction, so thx for that link. 🙂 I got something working today. The solution is not a universal solution as breakpoints will differ from site to site. 1\> **The Thumbnail** This is the image on the screen that is clicked to set off the lightbox. It can be either a single image or a picture element, either way the img has a “tlclb” class attached. No surrounding anchor tag is needed and it will handle retina screens and update the modal image if the browser is resized. 2\> **Page Content** **All** of the page content is wrapped in a wrapper div. 3\> **The Modal** This consists of a picture element in a div. 4\> **How it works** When you click on a thumbnail the JS extacts the root name of the image from the src or srcset, for example: \“some The root name **mypic** is extracted. Next the modal is created, as I mentioned it uses a picture element, I use JS replace to inject the root name in the appropriate spots. For example, one line of the template might be: \ All occurences of %name% are replaced with the root name, mypic. Then the modal is attached to the DOM and event handlers are then added. All very quick & dirty stuff, but it gets the job done 😉 Ooops… almost forgot the link… [lightbox](https://github.com/lenzjo/Responsive-Lightbox) ---
**Author:** ![iBobik](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/ibobik/32/93_2.png) [@iBobik](https://talk.jekyllrb.com/u/iBobik)\ **Post date:** [March 20, 2017, 6:07pm UTC](https://talk.jekyllrb.com/t/is-there-such-a-thing-as-a-truely-responsive-lightbox/319/6 "2017-03-20T18:07:26Z")
Probably the best lightbox I used is [Photoswipe.com](http://Photoswipe.com). It has perfect usability on touch, mouse and keyboard devices (inc. touch desktops and phones with keyboard) and works on all screen sizes. Also native-like zoom controll on touch. But it is not configurable by HTML elements (like other lightboxes) but by JS (you need to list images with all sizes in array of objects), so CMS will need to take care of it, not just print `` for each image, but it should not be hard in Jekyll. ---
**Author:** ![lenzjo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/lenzjo/32/115_2.png) [@lenzjo](https://talk.jekyllrb.com/u/lenzjo)\ **Post date:** [March 21, 2017, 11:09am UTC](https://talk.jekyllrb.com/t/is-there-such-a-thing-as-a-truely-responsive-lightbox/319/7 "2017-03-21T11:09:50Z")
Looks nice… but as you say “it is not configurable by HTML elements” in other words, as they say, it does not support either \ or \. If you want responsive images they provide a way of doing so with a load of JS.