Skip to main content
PleaseWork1978
Inspiring
September 9, 2021
Question

Return key press fixes lightbox overlay failure to expand past viewport in devtool view?

  • September 9, 2021
  • 1 reply
  • 488 views

Lightbox++ opacity overlay fails beyond the viewport, but expands in Chrome devtools mobile view on return key press. Can js mimic this on mobile?

 

I’m using lightbox++ on my site, when viewed on mobile devices, if the user clicks on an image and scales it up, the area outside the viewport remains white instead of being covered with the opacity overlay.

I’ve noticed on Chrome developer tools mobile view, when I press the return key, it does some sort of "soft refresh" (it doesn’t reload the whole page, only the lightbox, somehow), which then surprisingly expands the entire overlay over the outside viewport area, just the way I would like it to behave.

So it begs the question, can I force that to happen with javascript?
I want that behavior to happen on each instance of the image being clicked on, then loaded, then the return key "pressed", thus the lightbox reloaded, etc., in order to ensure the overlay is always over both the viewport and outside the viewport area.

 


Link to the test site:
https://www.solarinkgraphics.com/index_TEST003.html 

 

Chrome dev mobile view, pre return key press.
https://i.stack.imgur.com/HHDve.png 

 

Chrome dev mobile view, post return key press.
https://i.stack.imgur.com/AoI2N.png 

 

View on the actual mobile device.
https://i.stack.imgur.com/H76YZ.png 





This topic has been closed for replies.

1 reply

Legend
September 9, 2021

I would advise using a different lightbox, the one you are currently using is dated.

 

It's setting the width of the 'overlay' in px to the width of the browser window when opened, so consequently when you adjust the browser window it stays at the original width. It also uses a repeating png background image to create the grey background (sorry I fell off my chair laughing a lot at this stage). It also doesnt appear to be responsive.

 

It may have been partially ok 15 years back but today its irrelvant.

PleaseWork1978
Inspiring
September 10, 2021

Okay so which lightbox would you recommend that would solve this and be resposive. 

Legend
September 10, 2021
quote

Okay so which lightbox would you recommend that would solve this and be resposive. 


By @PleaseWork1978

 

As I don't use 'plugins' myself (I write my own code) it's difficult to make a suggestion. Maybe someone like Nancy could make some suggestions as I'm completely out of touch when it comes to  3rd party code solutions.