Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1378453

    I wish to create a link that triggers a popup lighbox with content of which I have full control regarding layout.
    My hope is to call a Color Section on the same page to present itself in the lightbox.

    I have added this to the functions.php file:
    …………………………………………………..
    function inline_popup_enabler(){
    ?>
    <script>
    (function($){
    $(window).load(function() {
    $(‘.inline_popup’).magnificPopup({
    type:’inline’,
    midClick: true
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘inline_popup_enabler’);
    …………………………………………………
    And the link looks like this:
    Popup test

    The color section Custom ID Attribute is: popup
    And the Custom CSS Class is: mfp-hide (which makes the color section only show once the ID is triggered.

    But it does not work – what am I missing?

    It is important that I manage to trigger at color section so that I can present different content and layouts in the popup. Such as an Easy slider, text box etc.
    Hope you can help…

    #1378497

    replace in your code:

    $(window).load(function() {
    // with:
    $(window).on('load', function(){
    

    so that there is then:

    function inline_popup_enabler(){
    ?>
    <script>
    (function($){
      $(window).on('load',function(){
        $('.inline_popup').magnificPopup({
          type:'inline',
          midClick: true
        });
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'inline_popup_enabler');
    #1378498

    Thank you very much – it did the job :-)
    Is there a way to manage the width of the popup lightbox? Right now it’s fullwidth – and not very nice.

    #1378509

    i’m participant as you are – so if there is a private content link – i can not see.
    but you can try:

    .mfp-inline-holder .mfp-content, 
    .mfp-ajax-holder .mfp-content {
      width: 80vw;
    }
    #1378552

    Wow, thank you very much – it works.
    Do you by any chance have a solution on how to manage the width separately for smartphone versus desktop?

    I tried this – but it didn’t work:

    @media only screen and (min-width: 990px) {
    .mfp-inline-holder .mfp-content,
    .mfp-ajax-holder .mfp-content {
    width: 40vw;
    }

    @media only screen and (max-width: 767px) {
    .mfp-inline-holder .mfp-content,
    .mfp-ajax-holder .mfp-content {
    width: 80vw;
    }

    #1378614

    Hi,

    It looks like you are missing the closing curly bracket in both your media queries, maybe that’s the problem?

    Best regards,
    Rikard

    #1378633

    Of course – my bad – thank you guys. Great support :-)
    Now I just realized a new issue when using a smartphone:
    The background seem to scroll to the top when clicking the trigger link. The popup is there alright but you have to scroll down in order to actually see it on a smaller screen.
    Try it here on your smartphone: https://fyrholtrejser.dk/rejser/st-johann/#indkvartering
    Click on the link: “Se evt. mere om hotellet her”
    What to do?

    • This reply was modified 1 year, 10 months ago by RasMaster.
    #1378661

    first try this filter in your child-theme functions.php :

    
    add_filter( 'avf_default_lightbox_no_scroll', '__return_true' );
    


    if it does not work

    you can give in your case to that text manuall the second custom class: no-scroll
    Just put to that place where you entered your inline-popup class
    so enter : inline-popup no-scroll

    _____________
    Why do I mention : “in your case”.
    Mostly you can’t assign the trigger class directly to the link. e.g. a button ALB – the custom class would go to a parent element of the link ( so it’s not at the anchor).
    So I mostly enter the trigger class to a parent element – and noted this inline popup snippet like this way:

    
    function inline_popup_enabler(){
    ?>
    <script>
    (function($){
      $(window).on('load',function(){
        $('.inline-popup').find('a').addClass('no-scroll');
        $('.inline_popup').magnificPopup({
          delegate: 'a',
          type:'inline',
          midClick: true
        });
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'inline_popup_enabler');

    But now since Enfold 5.1 there is this filter: avf_default_lightbox_no_scroll

    #1378673

    Thank you Guenni007 – you have been very helpful – I really appreciate it :-)

    All I had to do in this case was to add the second custom class; no-scroll to this:
    Popup

    And now it looks good on both desktop and smartphone with no scrolling behind the popup :-)

    #1378679

    by the way – you can set the submenu :

    on Content Tab “Sticky Submenu” to stick to the header when it scrolls down. ;)

    #1378763

    Great idea – thank you Guenni007

    Have a look at https://fyrholtrejser.dk/rejser/test/ where you see the Sticky Submenu in action.
    I am controlling the font size in this menu with the following CSS:

    #top .av-subnav-menu li a {
    font-size: 17px;
    }

    How do I make the active menu item underlined only in this Sticky Submenu?

    #1393994

    your script is working – but i would play a bit with your colors to get a better usability:

    #top #wrap_all .av-subnav-menu > li.current-menu-item a {
      text-decoration: none !important;
    }
    #top #wrap_all .av-subnav-menu > li.current-menu-item a > .avia-menu-text {
      background-color: #678908;
      border-color: #678908;
    }
    #1394340

    Hi,
    When I test your page the menu highlighting seems to work but some of the lower sections are not very high so sometimes two sections will show at once and the menu will highlight the lower second on desktop.
    Try making each second 100 percent high so when you click on a menu item the section will fill the screen.
    Enfold_Support_109.jpeg

    Best regards,
    Mike

    #1394851

    Thank you – it’s all working just fine now that I have put some more content around the anchor elements.
    You can close this thread now.
    Great support :-)

    #1394891

    Hi,

    Glad to know that the issue has been resolved. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Lightbox popup on Enfold’ is closed to new replies.