Is there such a thing as a TRUELY responsive lightbox?


#1

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 :wink:

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.


#2

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.


#3

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:

<a href=“path_to_large_image” data-lity>
   <img src=“path_to_thumbnail_image” alt=“alt-text”>
</a>

The thumbnail_image was easy enough to do with the <picture> 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 <a>'s src. I just found this article on detecting css breakpoints in JS. It’s getting late here now, so I will persue this further tomorrow.


#4

Here’s a more fleshed out example with documentation.


#5

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. :slight_smile:

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:
<img class=“tlclbp” sizes=“200px” srcset=“img/mypic-thumbnail.jpg 200w, img/mypic-thumbnail-hd.jpg 400w” alt=“some alt text”>

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:

<source sizes=“1200px” srcset="/img/%name%-lg.jpg 1200w, /img/%name%-lg-hd.jpg 2400w" media="(min-width: 1200px)">
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 :wink:

Ooops… almost forgot the link… lightbox


#6

Probably the best lightbox I used is 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 <a><img></a> for each image, but it should not be hard in Jekyll.


#7

Looks nice… but as you say “it is not configurable by HTML elements” in other words, as they say, it does not support either <picture> or <srcset>. If you want responsive images they provide a way of doing so with a load of JS.