Lightbox with Srcset support

[Siberian]

Hi, I was hoping I can get some help. I've been searching and searching for a lightbox that works with SrcSet so I can display different images based on viewport width. Most to which I have found; don't support SrcSet but presentation wise, are exactly what I want, somewhat a conundrum.

[gentlemedia]

If your thumbnail images are on small screen as width as the width of the screen/device then you could, or even should, disable the lightbox functionality on small screens.
http://bradfrost.com/blog/post/conditional-lightbox/

But if not, then you can implement a lightbox with scrset support such as in this pen:
http://codepen.io/dudleystorey/pen/LEBjyL/

[Siberian]

If your thumbnail images are on small screen as width as the width of the screen/device then you could, or even should, disable the lightbox functionality on small screens.

Are you saying, if the images for the small screen are as wide as the width of the screen then you should disable the lightbox ? Wouldn't they typically be as wide as the lightbox ?

One other thing I forgot to mention, typically, although some lightboxes have options, you have borders with lightboxes, in my ideal lightbox, remove all those borders. The <img> first seen on a mobile device scaling up to a desktop would be the same, the srcset would come into effect when the image is clicked then the image which fits the screen width is sent to the user, make sense ? ;-)

The code pen example isn't suited to test for scalability, it's not the markup, it's codepen. Although the codepen example is simply and direct, which is what I'm after; is it your lightbox ?

Another goal of mine is to eliminate pinching and panning the image, make the image appropriate to the screen size so the user can simply look at it, understand the image, for example, if it's a diagram of sorts without having to do finger houdini © on their phone (no the term finger houdini is not copyright, but it should, it's term I thought of, well I think it's a good term)

[gentlemedia]

The link to that article explains it really well what I meant. Did you read it?

That pen is not mine, but you can change the view to full page, so you could test it on a small screen. http://codepen.io/dudleystorey/full/LEBjyL/

If your image is a diagram that gets unreadable on small screens and you want to disable zoom, then you should give the users a decent fallback. You could of course create different versions of the diagram that can be read/viewed if the screen is narrow and small, but diagrams should possibly be better created and embed these days with SVG, because support is pretty solid.
http://caniuse.com/#feat=svg

[gentlemedia]

by the way... with thumbnail images, I meant the mages where user clicks on to open the bigger version of it in the lightbox.

[Siberian]

I read the article, the author suggest to link the image as so it opens seperately; instead of contained within a lightbox; I want to use a lightbox. The CodePen is good, I guess it's free to use, I may end up using it.

Polyfills are needed to make srcset work with the lightbox, I was hoping the lightbox could wrap it all into one.

[Siberian]

Unfortunately IE Mobile won't display the CodePen page correctly. Can you show a screen capture of one of the images open on your Phone, if you don't mind ?

Would you happen to know how the close button can be removed on the CodePen lightbox and replaced by simply clicking on the image to close the image, or tapping, one in the same ? ;-)

[gentlemedia]

Do you mean that codepen won't display correctly or the lightbox demo itself?
I've opened the demo in Safari on my iPhone and the creator of that lightbox demo has also disabled the lightbox for small screens, The thumbnail/small image is as width of the width of my screen and the title and description are just placed underneath the image.
.
I also find that this is the best way of doing it, becuase a lightbox doesn't make sense on small screens if the small image takes up already the full width of the screen realestate. The lightbox image version won't be any bigger then that, so it would be a useless feature. For tablets and up it would be a nice feature to have.

Would you happen to know how the close button can be removed on the CodePen lightbox

Take out the var closedialog

and replaced by simply clicking on the image to close the image

attach the closeDialog()function to a click event handler on the img.

[Siberian]

Do you mean that codepen won't display correctly or the lightbox demo itself?

CodePen won't display at full screen, I asked someone who owns an iPhone5c as well as my Windows Phone and neither could display the CodePen at full screen ?

I've opened the demo in Safari on my iPhone and the creator of that lightbox demo has also disabled the lightbox for small screens, The thumbnail/small image is as width of the width of my screen and the title and description are just placed underneath the image

How do I enable the lightbox for small screens; I don't understand one can still use a lightbox on mobile, tap to open the image larger from the <img src> & tap to close the image. For example, if the image from the <img src> is 320x240 hypothetical image size, and the 320w image from the srcset is 320x480px the lightbox should still work, you're saying it doesn't make sense ?

[gentlemedia]

I had no issues opening the fullpage on my iPhone5.

It wouldn't make sense if your thumbnail image would've the same dimensions as the image that opens in the lightbox on small screen, but since your thumbnail image is a (half) crop of the actual sized image, then you can enable the lightbox if you want.

Inspect the JS... the creator uses window.matchMedia() to add a class min at 800px.

[Siberian]

Would you be able to send a screen capture of the page open at fullpage; as well as another screen capture of one of the image tapped on your iPhone, I can compare that to the one sent to me from someone else ?

[gentlemedia]

Like I said the Lightbox functionality is disabled. The photo, the title and paragraph text are just underneath each other on my phone, so there's no image tapping either.

[Siberian]

The lightbox works by default; you personally disabled it for the image in your previous message, correct ?

Since there were problems testing the CodePen page with another iPhone, I create a full HTML page here; although when I click either image the lightbox doesn't work ?

[gentlemedia]

I didn't disabled anything. The creator of that pen did.
That HTML page of yours doesn't do anything in Chrome on my Mac, so I don't know what you did there.

[Siberian]

I copied the code from the CodePen to a clean HTML page for screen testing, the lightbox doesn't work on my end either; yet there is nothing I missing in the code, I download a copy of the script and put it on my server; yet it still doesn't work ?

[Siberian]

I understand the whole point of removing a lightbox on a mobile screen, then again, a lightbox can work on a mobile screen. If the lightbox is kept simple, with no frills. And as in my case, the viewer initially sees one image but when clicked or tapped on a touch device, srcset displays the correct image for the correct screen width. In other words, someone with a small screen, mobile for example, will get an image that shows something specifically, while someone on a tablet or desktop will get almost, if not the full image.

Every screen is accommodated as well the lightbox works on every screen because it's simply. The lightbox you supplied a link for gentlemedia almost fits that description, except the lightbox is turned off, how do you turn it on ?

Lightboxes with borders and close buttons those can hinder user experience on mobile, and are not well suited, even on a desktop, I've seen lightboxes where the close button requires hunting, unless you visit the page frequently, otherwise clicking on an image which most people who browser the internet instict would be, place the cursor over the image and hit the button, lightbox closes, you can't get any better then that for user experience ;-)

[gentlemedia]

except the lightbox is turned off, how do you turn it on ?

Check the window.matchMedia() method in the js of that pen. Either try to remove that whole functionality or easy way is to lower the 800px value.

[Siberian]

I changed the line to 450px. Why isn't it working on this page ?

[gentlemedia]

That page wasn't loading correctly before that either. Check the browser console. You have a couple of errors, which breaks the lightbox.

[Siberian]

dialogPolyfill.registerDialog(dialog);
Is the only Js error, which is in a condition but doesn't seem as if it's a condition that is irrelvent ?

[Siberian]

The console.log references the dialog.polyfill script from another absolute location, but that has been long changed; doesn't make sense.