Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1059780

    Hello Enfold Forum,
    I share more or less the same problem as conflock in this post.
    But I couldn’t find the variable (“fixedContentPos: true”) in the avia.js file he mentioned.

    So my question remains:
    How can I remove the scrolling bar inside lightbox? It causes bad user experience according to me, like you can check for yourselves in this page.
    I wish that during the lightbox is displayed, the scrolling bar disappears AND that there are no more possibilities to scroll up or down as well.

    Can’t wait to hear from you.

    #1059906

    Hey rvga,

    Using jQuery on click method you can initiate the below css when a lightbox is clicked to hide the scrollbar.

    ::-webkit-scrollbar {
        width: 0px;
        background: transparent; /* make scrollbar transparent */
    } 

    Best regards,
    Vinay

    #1059909

    but i think what you mean is not the scrollbar in the lightbox but that background of lightbox is scrollable:
    (sometimes the content of the lightbox isnt an image but maybe a website or a lot of text – this should stay scrollable)

    try this in functions.php of your child-theme:

    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
    }
    #1059930

    and by the way – from your link above – till now avia.js was splitted in different files.
    The setting now can be find in : avia-snippet-lightbox.js line 20
    so a different method could be to have a child-theme avia-snippet-lightbox.js file and load this
    but this will be a bit harder to make – because the script was conditionally loaded on functions.php of enfold.

    don’t know how to deregister that conditionally and register conditionally via a child theme

    #1060585

    hm ? :lol

    Can’t wait to hear from you.

    it seems that it is not so urgent as you said ;)

    #1061376

    Hi,

    Thanks for helping out @guenni007, appreciated as always :-)

    Best regards,
    Rikard

    #1067213

    more than 2 weeks ago ?!

    are there any problems understanding the above?
    Is it how to install a child-theme ?
    please talk to us – we only can help if we got input from you

    #1067231

    I’m so sorry guys, I didn’t take time to answer nore I had time to read your replies, I’ve been and I’m still overwhelmed by work.
    but I promise to come back ASAP onto the matter. Please accept my apologizes, hopefully talk to you soon.

    #1067649

    Hi rvga,

    No problem, we’ll keep the thread open for you.

    Best regards,
    Rikard

    #1075640

    Hi guys
    Sorry for this too long silence.

    Hey Guenni, your code works like a charm. This is exactly what I was looking for.
    No more visible scrolling bar once the lightbox is activated AND probably the most important no more scrolling moves of the image itself in case we roll the middle button of the mouse.

    Thank you so much for being cooperative and patient enough until I can test your code and reply to you, I really appreciated.
    Thank of you, this post is now solved.

    #1075693

    thanks for response and feedback:
    allthough i would like to know that i’m on a lightbox so maybe a little transpranency would be nice:
    ( but that’s up to you, of course – and a matter of preference )

    .mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready.mfp-preloader {
        opacity: 0.9 !important;
        background: black !important;
    }

    By the way : on your website the directory listing is possible so i can search in your uploads folder and download the bigger files.
    I don’t think this can be in your interest.
    There are different ways to disable that – i use for that htaccess file.
    f.e. with that Options All -Indexes
    please inform yourself in detail, this is already a security risk

    #1075713

    I don’t really need transparency but I’ll keep your code in safe place in case I change my mind.
    BTW, where will you put the code ? In the quick CSS theme area, I guess ?

    Thanks for the directory browsing issue, I wasn’t sure what you’re talking about until I read that article. I wasn’t aware about that point at all. I’ll modify my htaccess file for sure.

    Thanks Guenni for having checking that for me ;)

    #1075854

    yes that code is for quick css and i guess this must be code with opacity:1 existing in your quick css already
    (by default enfold got a opacity of 0.8)

    By the way, I’m very impressed by your pictures;
    unfortunately I use my photo equipment very little for creative purposes. I do quite a few art reproductions with my Nikon D850. I am convinced that I could photograph much more than Rhenish Impressionism with it ;)

    #1075896

    Thx for the photos (there are not mine) I will let the photographer know that she has already enthousiasts people for her talent ;)

    #1076225

    Hi rvga,

    Thanks for the update, I’m not sure if you need any further help on the topic? Thanks @guenni007 for helping out :-)

    Best regards,
    Rikard

    #1076342

    No Rikard, I’m fine with that issue, thx.

    #1076723

    Hi,

    Thanks for the update, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Disable scrolling inside lightbox’ is closed to new replies.