• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
Sep 09, 2021 Sep 09, 2021

Copy link to clipboard

Copied

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 





TOPICS
Browser , Code , How to , Interface , Other

Views

171

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 09, 2021 Sep 09, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 10, 2021 Sep 10, 2021

Copy link to clipboard

Copied

LATEST

I already answered this on Sept. 5 in your other thread on what is essentially the same topic.   You have conflicts with older scripts because they are woefully outdated and need replacing.

https://community.adobe.com/t5/dreamweaver-discussions/jquery-3-5-1-slim-min-js-conflict-with-lightb...

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines