-
AuthorPosts
-
September 19, 2019 at 9:13 am #1139811
Hi,
I have an issue i’d like to adjust in the masonry galleries of my website.
When I open an image in the pages where I used a masonry gallery, the image is not “fixed” in the middle of the screen, but, if i scroll up or down with my mouse (on pc) or with touch (on mobile) the images moves up and down.
I’d like the image to be open and “locked” on the screen, even if i scroll up or down.
In the masonry settings there is no setting related to this, maybe i need a css?
Thanks a lot for the support and best regards.September 24, 2019 at 6:19 am #1141223Hey Real-3D,
Thank you for the update.
We don’t really see any issue in that page or maybe we just don’t understand what you’re describing. Can you give us a screencast or screenshot of the issue?
Best regards,
IsmaelSeptember 24, 2019 at 8:48 am #1141265Hi and thanks,
i link here a video where you can see that in the masonry galleries, when i open an image, if i scroll up or down when the image is open, it moves up and down.
I’d like the images to be fixed on the screen, even if i scroll up or down.
Thanks a lot for the help!September 26, 2019 at 4:03 am #1142098Hi,
Thank you for the update.
This css code should make the lightbox container stick on scroll.
.mfp-wrap.mfp-gallery.mfp-close-btn-in.mfp-auto-cursor.avia-popup.mfp-zoom-in.mfp-ready.mfp-image-loaded { position: fixed !important; top: 0; }
Let us know if that’s what you’re after.
Best regards,
IsmaelSeptember 26, 2019 at 8:59 am #1142151Hi Ismael and thanks for your reply.
I tried the CSS you suggested but it’s not ok: the first images on the top seems to be locked, but the images below disappears little by little as I go down.
Take a look at the video in the link in Private Content to undestrand better the problem.
Thanks again and best regards!September 27, 2019 at 6:05 am #1142573Hi,
Thank you for the update.
Add this css code to prevent the site from scrolling when lightbox is activated.
.mfp-zoom-out-cur { height: 100vh; overflow: hidden; } .mfp-bg { height: 100vh !important; }
You can also add this css to remove the transparency of the lightbox background and completely cover the site content.
.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader { opacity: 1; }
Best regards,
IsmaelSeptember 27, 2019 at 6:50 am #1142579i think he/she is talking about the background behind the lightbox – the state of overflow-y : scroll on active lightbox.
try this in your child-theme functions.php:
add_action('wp_footer', 'no_background_scroll_on_lightbox_open'); function no_background_scroll_on_lightbox_open(){ ?> <script type="text/javascript"> (function($) { function a() { $('body').on('click', '.lightbox-added', function() { if($('.mfp-bg').length >= 1) { $('html').css("overflow-y", "hidden"); } }); $('body').on('click', function() { setTimeout( function() { if($('.mfp-bg').length == 0) { $('html').css("overflow-y", "scroll"); } },500); }); } a(); })(jQuery); </script> <?php }
September 27, 2019 at 9:37 am #1142609Hi and thanks.
The CSS provided by Ismael doesn’t work properly because if i scroll up with my mouse the images are not fixed and still moves.
The text to insert in functions.php provided by Guenni007 seems to be ok because it blocks the opened images, but the problem is that the lateral browser scroll bar continues to appear and disappear every time I open and close an image, and continuing to scale up and down the page and the images contained in.
It would be great if the browser lateral bar could be locked when the image is open, preventing it from disappearing and reappearing every time.
Thanks for the support and best regards.September 27, 2019 at 10:04 am #1142633i have to see the site – to give you better instructions.
the scrollbars in the lightbox should not be affected – how would you show then all the content if it is bigger than lightbox window.
the scrollbar in the background is gone on opended lightbox by that code above ( overflow-y : hidden) – on closing the lightbox it must be there.
see website in iframe f.e: https://webers-testseite.de/my-website/September 27, 2019 at 10:38 am #1142654Hi and thanks.
Sorry but I don’t know what iframe is… :(I link a page of my website with the issue in Private Content.
I used the code provided and I insert it in the functions.php file. The thing i’d like to do is that the browser lateral bar could be “locked” when the image is open, preventing it from disappearing and reappearing every time and preventing the page to scale up and down.
Any tips?
Thanks a lot for the support and best regards!September 27, 2019 at 11:30 am #1142689only moderators can see private content – so wait til mods are here. Sorry without the page i could not help you
September 27, 2019 at 11:32 am #1142691Oh sorry, didn’t know!
Here’s my website page: https://real-3d.it/interni/
Thanks a lot!September 27, 2019 at 11:54 am #1142706thanks –
when does the problem come up for you?
with the lightbox open – or when the lightbox is closed?With the lightbox open – it’s the way I want it: the background doesn’t scroll away – there is no scrollbar visible on the right.
When the lightbox is closed : I have to scroll down to get to the content – then the scrollbar appears.
But that depends on the browser too! Firefox does not show it on scrolling – chrome does – safari too.
You can always have the scrollbar displayed regardless of whether a content is smaller or larger than the page height.September 27, 2019 at 12:13 pm #1142712Hi and thanks!
Maybe I can’t explain with the right words, sorry… :(
I’d like the scrollbar to be always visible but “not working” and inactive when the lighhtbox is open.
I also tried with firefox but the scrollbar is visible like google chrome…
The problem i want to adjust is that when I close the lightbox the scrollbar appears and the page gets a little smaller…the only way is to have the scrollbar always active. I don’t know if it’s possible to do
Thanks for the help!September 27, 2019 at 12:25 pm #1142716For example like this website:
when the image is open the scrollbar section doesn’t disappear but it is inactive.
September 27, 2019 at 2:11 pm #1142759I can look at your page on 3 browsers here under Mac.
In none of them the problem is there!In Enfold you have set the slight magnification effect on the images in hover – that doesn’t cause the page to “jump” for me either. – I know the phenomenon from before, but I haven’t seen it for a long time.
Where do you look at your pages in IE10 or Edge? and PC / Windows10 …
Aha – now i’m on my PC and there it is. Maybe a margin-right will do the trick on PCtry instead :
add_action('wp_footer', 'no_background_scroll_on_lightbox_open'); function no_background_scroll_on_lightbox_open(){ ?> <script type="text/javascript"> (function($) { function a() { $('body').on('click', '.lightbox-added', function() { if($('.mfp-bg').length >= 1) { $('html').css({ "overflow-y": "hidden", "margin-right": "17px", }); } }); $('body').on('click', function() { setTimeout( function() { if($('.mfp-bg').length == 0) { $('html').css({ "overflow-y": "scroll", "margin-right": "0px", }); } },500); }); } a(); })(jQuery); </script> <?php }
- This reply was modified 5 years, 2 months ago by Guenni007.
September 27, 2019 at 2:21 pm #1142767BUT: this could solve the problem on PC –
but then it is on MACSeptember 27, 2019 at 2:34 pm #1142768Thanks for all your kind replies.
The last code you provided works well, i tried it on Google Chrome on 2 pcs and it’s ok.
Great, that’s what i wanted!! :)
The only issue is that now, when I close the lightbox, the “background” with the images list side by side “moves” up or down to center in the screen the image i have just closed…I tried in Firefox but the problem does not exist, only in Chrome there is this issue…
Maybe can this be solved?
Thanks a lot for your support and for your time! :)September 27, 2019 at 4:25 pm #1142798this is a hard to find a device independent solution.
with the above code it has the negativ jumping scrollbar issue on MACSeptember 27, 2019 at 4:37 pm #1142805Yes, I was already imagining that there is not an unique code for all devices/browsers…
Well, thanks again for your help and support with the codes provided, I am currently using them, and I will see in a future whether to keep it or to maintain the “standard” settings of the gallery.
Thanks again! :)September 27, 2019 at 10:01 pm #1142918i think this is one reason Kriesi does not have overflow-y: hidden on html when lightbox is open.
maybe you take better ismaels advice to completely overlay the background – so you don’t see if it is scrolling or not.
Or work a lot with fixed positioning.This way: without the overflow-y snippet
/*** these next two rules seems to be obsolete now - tests are still running****/ .mfp-zoom-out-cur { height: 2000vh; overflow: hidden; } .mfp-bg { height: 2000vh !important; }
try first only with these rules :
.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader { opacity: 0.8; } .mfp-content { position: fixed; top: 50%; left: 50%; transform: translate(-50% , -50%); overflow: hidden; } .mfp-arrow { position: fixed } .mfp-wrap + #wrap_all { position: fixed } img.mfp-img { max-width: 70vw; /*** 80vw still works ***/ padding: 10px 0 !important; /*** i would do a padding here - looks nicer ***/ }
guess this is an elegant method – and it works with all browser i guess
maybe we had to put it in media query only for desktop browsers – i had to look what happens to mobile devices.- This reply was modified 5 years, 2 months ago by Guenni007.
September 30, 2019 at 8:54 am #1143243Hi and thanks.
The first code provided for the functions.php seems to have an error, and the second seems to change nothing in the website.October 1, 2019 at 12:57 pm #1143703This Code has no error – it is copy pasted from an enfold 4.6.2 Installation from my server and it works very well there – but because i have never sit before a PC i did not recognize that there is the jumping scrollbar issue.
The css code ( as mentioned above – without that functions.php snippet to use)
Look: Movie with your siteSee example page – tested on both MAC an PC – no scroll-jump! Only different browsers show the scroll-bar – maybe this is possible too to influence.
https://webers-testseite.de/guenni/masonry/October 1, 2019 at 6:25 pm #1143873Ah, i was putting it in functions.php file, I was making a mistake, because I had to copy it in CSS; copying it in CSS it seems to work.
The only problem is that, when I open an image lightbox, the background images “moves” to the top. It should be locked…October 1, 2019 at 7:05 pm #1143890i can not see my code in your source code at all.
Where is it:.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader { opacity: 0.8; } .mfp-content { position: fixed; top: 50%; left: 50%; transform: translate(-50% , -50%); overflow: hidden; } .mfp-arrow { position: fixed } .mfp-wrap + #wrap_all { position: fixed } img.mfp-img { max-width: 70vw; /*** 80vw still works ***/ padding: 10px 0 !important; /*** i would do a padding here - looks nicer ***/ }
October 1, 2019 at 9:07 pm #1143928I tried it but i deleted it because it was not working properly.
Now I inserted it again in such a way as to give you the possibility to check the problem I wrote about.October 2, 2019 at 9:34 am #1144106A second problem related to the last css is that on mobile the images lightbox is smaller than without this css…
So it’s not working properly…October 3, 2019 at 7:53 am #1144373Hi,
Thank you for the update.
You can move the above css code inside a css media query so that it won’t affect the mobile view.
@media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ }
Best regards,
IsmaelOctober 3, 2019 at 8:54 am #1144390Hi and thanks.
The last code provided doesn’t change nothing in mobile devices…I tried it but deleted because it was not working…
Best regardsOctober 7, 2019 at 1:50 am #1145575Hi,
Thank you for the update.
You have to move @Guenni007’s latest css code inside the css media query. It should limit the css code to desktop view. Did you move the css modification?
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.