Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #940436

    Hi
    When i open a picture in the lightbox you can scroll the whole page further, so that you can’t see the opend image in the lightbox anymore, like on this page https://ultrapress.de/einstellungen-und-technik/.

    Is it possible to fix the page while the lightbox is opened?

    Thanks
    M_AVT

    • This topic was modified 5 years, 11 months ago by M_AVT.
    #940454

    not to fix the page – but to fix the lightbox with its image.

    .mfp-wrap {  position: fixed !important }
    

    but look if this works on mobile too – because fixed positioning can be ugly
    than use instead

    html:not(.avia_mobile) .mfp-wrap {  position: fixed !important }
    
    #940805

    Hi Guenni!

    Thanks for your help. This works fine, but i still have the problem with the page in the background. I use a fullscreen background image and only the content scrolls, the image is always on the same position. But when i open a image with the lightbox i can’t scroll the content in the background, instead the whole page is scrollable. And when i sroll down the image disappears and i only have a grey background and that looks a bit ugly.

    So i thought maybe it is possible to fix the page.

    #940809

    can you show me the link to that?

    the magnificPopup event must add the overflow:hidden to html .
    hm : just brainstorming…

    #940814

    I have installed it lokal, i only can make a screenshot.
    When i open the lightbox it cuts the page at the top and at the bottom i have marked it with the red circle https://imgur.com/Aws0Bqa. The cut is always on the ends what is displayed on the screen, before i open the lightbox. When i open the lightbox i can not scroll up only down. And when i scroll further it looks like that https://imgur.com/gLJ3rjh and at the end the whole content is scrolled up and the background is grey.

    Now i have tested with microsoft edge there is everything normally only the content in the background is scrollable like it should be.

    • This reply was modified 5 years, 11 months ago by M_AVT.
    #940840

    a very simple quick and dirty method would be to have a non transparent background ;)

    .mfp-zoom-in.mfp-ready.mfp-bg {
        opacity: 1;
    }

    Did you use a different lightbox plugin ? That would be nice to know

    #940841

    Thanks Guenni, thats a good idea.

    #940844

    but it isn’t that terra messflug at ? This is not enfold

    #940845

    No thats the old page. I set up it new with wordpress and enfold

    • This reply was modified 5 years, 11 months ago by M_AVT.
    #940875

    Hi M_AVT,

    I’m not sure if you managed to get your problems solved or not?

    Thanks @guenni007 for helping out :-)

    Best regards,
    Rikard

    #940896

    Hi Rikard!
    The problem is existing but with the lightbox background not transparent it isn’ t visible anymore. So that is okay.

    Best regards
    M_AVT

    #940918

    the magnific popup script sets the html to overflow-y scroll.
    that has the reason not at last because otherwise on open the lightbox the background will jump to the right ( the width of the scroll bars)
    This looks ugly too.

    #941149

    PS : on his example page this is exactly the behavior – on lightbox open the html goes to overflow-y : hidden
    http://dimsemenov.com/plugins/magnific-popup/

    #941231

    Hi,

    Do let us know if you were able to get this issue sorted.

    Thanks, @Guenni007 for helping out :)

    Best regards,
    Vinay

    #941333

    Hi Guenni
    Do i need javascript to solve this problem like on the example page you have mentioned.
    Thanks

    #941413

    i’m on that topic – but yet i do not know how to have a child theme friendly solution.
    I have to read more in the magnific popup api documentation to see if there was a possibility. The code inserted from enfold to html (overflow-y: scroll) is inline code too – on that testpage of Semenovs Testpage is set via css.

    #941427

    Hi Guenni!
    What do you mean exactly with “the background will jump to the rigth”? I still only have the scrollbar for up and down.

    #941505

    the scrollbars have a given width ( guess something like 17px)
    the overflow-y : scroll rule sets scrollbars even if the content fits into screen-height !
    Some browsers ( guess safari or the mobile browser ) hide the scrollbars on lightbox open (even if content is bigger than screen-height) if there wasn’t a overflow setting ( or set to auto)

    #941546

    this is only set if enfold detects a masonry and if content height is bigger than window height:

    shortcodes.js:

    //fix for non aligned elements because of scrollbar
    if(container.outerHeight() + container.offset().top + $('#footer').outerHeight() > $(window).height())
    {
    	$('html').css({'overflow-y':'scroll'});
    } 

    we had to find a different solution for it

    #942457

    Hi Guenni!

    This problem which i described is only existing when the content do not fit into screen-height.

    #942459

    yes that is the line above from shortcodes.js and its calculation. it adds that css if window height is smaller than the sum of the other heights

    #943327
    #944065

    Hi Ismael!

    Thanks for your response. How do i have to change this code wich you have send in this post (https://kriesi.at/support/topic/button-link-to-lightbox-webpage-iframe/#post-918245), because i don’t use a iframe.

    Thanks and best regards
    M_AVT

    #944096

    try this: – and please ismael say if there are some faults or upgrades on that code
    i tried it first with attr or removeAttr but simple css was in success
    but the real hint was to the .mfp-bg

    add_action('wp_footer', 'custom_lightbox_script');
    function custom_lightbox_script(){
    ?>
    <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
    }

    you don’t need css settings in quick css because it works about css ( inline )

    see here in action: https://webers-testseite.de/weber/lightbox/

    #944124

    i will have a look what happens to pages with no masonry now and with image lightboxes

    Edit : works with video lightboxes too ( not the video alb element – but links from images or text to video files

    • This reply was modified 5 years, 11 months ago by Guenni007.
    #945288

    Hi Guenni!

    Thanks a lot for your help, this code works – the page is not scrollable anymore when i open the lightbox.

    Thanks and best regards

    #945726

    Hi,

    Awesome! Glad @Guenni007 helped. Please open a new thread if you need anything else. :)

    Best regards,
    Ismael

Viewing 27 posts - 1 through 27 (of 27 total)
  • You must be logged in to reply to this topic.