Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1195215

    Hi
    I found this ticket: https://kriesi.at/support/topic/lightbox-for-mailchimp-form/#post-582439
    to create a page on which I put the button link and text content to open into a lightlbox popup.

    That works when I create a test page. But can I have the same popup to open when I select one of my main menu option?

    For example, here’s a link to my website: https://silviafindings.com/
    I would like visitors/customers to see the following popup when they select the “Settings Findings” menu item: https://silviafindings.staging.wpengine.com/test-popup (a test page I created on my staging server).

    Can I do this with the Enfold theme and how would I do it?

    Thanks
    Lyse

    #1198972

    Hey tremblayly,
    Sorry for the late reply, when I looked at your site I saw two popups, one looks like it’s made with “popup press” with a blue background, and another that looked like it was made with the built-in lightbox. The popup press looks like it can be triggered with a link in the menu by adding a class to the menu item, please see here.
    Our built-in lightbox popup can’t be triggered with a menu link.
    But if you want to have another popup that can be triggered with a menu link try adding all of this code in a code block element on your page:

    <script>
    (function($) {
        
             // DOM Ready
            $(function() {
    
                // Binding a click event
                $('#menu-item-3144').on('click', function(e) {
    
                    // Prevents the default action to be triggered. 
                    e.preventDefault();
    
                    // Triggering bPopup when click event is fired
                    $('#element_to_pop_up').bPopup();
    
                });
    
            });
    
        })(jQuery);
    
     (function(c){c.fn.bPopup=function(A,E){function L(){a.contentContainer=c(a.contentContainer||b);switch(a.content){case "iframe":var d=c('<iframe class="b-iframe" '+a.iframeAttr+"></iframe>");d.appendTo(a.contentContainer);t=b.outerHeight(!0);u=b.outerWidth(!0);B();d.attr("src",a.loadUrl);l(a.loadCallback);break;case "image":B();c("<img />").load(function(){l(a.loadCallback);F(c(this))}).attr("src",a.loadUrl).hide().appendTo(a.contentContainer);break;default:B(),c('<div class="b-ajax-wrapper"></div>').load(a.loadUrl,a.loadData,function(d,b,e){l(a.loadCallback,b);F(c(this))}).hide().appendTo(a.contentContainer)}}function B(){a.modal&&c('<div class="b-modal '+e+'"></div>').css({backgroundColor:a.modalColor,position:"fixed",top:0,right:0,bottom:0,left:0,opacity:0,zIndex:a.zIndex+v}).appendTo(a.appendTo).fadeTo(a.speed,a.opacity);C();b.data("bPopup",a).data("id",e).css({left:"slideIn"==a.transition||"slideBack"==a.transition?"slideBack"==a.transition?f.scrollLeft()+w:-1*(x+u):m(!(!a.follow[0]&&n||g)),position:a.positionStyle||"absolute",top:"slideDown"==a.transition||"slideUp"==a.transition?"slideUp"==a.transition?f.scrollTop()+y:z+-1*t:p(!(!a.follow[1]&&q||g)),"z-index":a.zIndex+v+1}).each(function(){a.appending&&c(this).appendTo(a.appendTo)});G(!0)}function r(){a.modal&&c(".b-modal."+b.data("id")).fadeTo(a.speed,0,function(){c(this).remove()});a.scrollBar||c("html").css("overflow","auto");c(".b-modal."+e).unbind("click");f.unbind("keydown."+e);k.unbind("."+e).data("bPopup",0<k.data("bPopup")-1?k.data("bPopup")-1:null);b.undelegate(".bClose, ."+a.closeClass,"click."+e,r).data("bPopup",null);clearTimeout(H);G();return!1}function I(d){y=k.height();w=k.width();h=D();if(h.x||h.y)clearTimeout(J),J=setTimeout(function(){C();d=d||a.followSpeed;var e={};h.x&&(e.left=a.follow[0]?m(!0):"auto");h.y&&(e.top=a.follow[1]?p(!0):"auto");b.dequeue().each(function(){g?c(this).css({left:x,top:z}):c(this).animate(e,d,a.followEasing)})},50)}function F(d){var c=d.width(),e=d.height(),f={};a.contentContainer.css({height:e,width:c});e>=b.height()&&(f.height=b.height());c>=b.width()&&(f.width=b.width());t=b.outerHeight(!0);u=b.outerWidth(!0);C();a.contentContainer.css({height:"auto",width:"auto"});f.left=m(!(!a.follow[0]&&n||g));f.top=p(!(!a.follow[1]&&q||g));b.animate(f,250,function(){d.show();h=D()})}function M(){k.data("bPopup",v);b.delegate(".bClose, ."+a.closeClass,"click."+e,r);a.modalClose&&c(".b-modal."+e).css("cursor","pointer").bind("click",r);N||!a.follow[0]&&!a.follow[1]||k.bind("scroll."+e,function(){if(h.x||h.y){var d={};h.x&&(d.left=a.follow[0]?m(!g):"auto");h.y&&(d.top=a.follow[1]?p(!g):"auto");b.dequeue().animate(d,a.followSpeed,a.followEasing)}}).bind("resize."+e,function(){I()});a.escClose&&f.bind("keydown."+e,function(a){27==a.which&&r()})}function G(d){function c(e){b.css({display:"block",opacity:1}).animate(e,a.speed,a.easing,function(){K(d)})}switch(d?a.transition:a.transitionClose||a.transition){case "slideIn":c({left:d?m(!(!a.follow[0]&&n||g)):f.scrollLeft()-(u||b.outerWidth(!0))-200});break;case "slideBack":c({left:d?m(!(!a.follow[0]&&n||g)):f.scrollLeft()+w+200});break;case "slideDown":c({top:d?p(!(!a.follow[1]&&q||g)):f.scrollTop()-(t||b.outerHeight(!0))-200});break;case "slideUp":c({top:d?p(!(!a.follow[1]&&q||g)):f.scrollTop()+y+200});break;default:b.stop().fadeTo(a.speed,d?1:0,function(){K(d)})}}function K(d){d?(M(),l(E),a.autoClose&&(H=setTimeout(r,a.autoClose))):(b.hide(),l(a.onClose),a.loadUrl&&(a.contentContainer.empty(),b.css({height:"auto",width:"auto"})))}function m(a){return a?x+f.scrollLeft():x}function p(a){return a?z+f.scrollTop():z}function l(a,e){c.isFunction(a)&&a.call(b,e)}function C(){z=q?a.position[1]:Math.max(0,(y-b.outerHeight(!0))/2-a.amsl);x=n?a.position[0]:(w-b.outerWidth(!0))/2;h=D()}function D(){return{x:w>b.outerWidth(!0),y:y>b.outerHeight(!0)}}c.isFunction(A)&&(E=A,A=null);var a=c.extend({},c.fn.bPopup.defaults,A);a.scrollBar||c("html").css("overflow","hidden");var b=this,f=c(document),k=c(window),y=k.height(),w=k.width(),N=/OS 6(_\d)+/i.test(navigator.userAgent),v=0,e,h,q,n,g,z,x,t,u,J,H;b.close=function(){r()};b.reposition=function(a){I(a)};return b.each(function(){c(this).data("bPopup")||(l(a.onOpen),v=(k.data("bPopup")||0)+1,e="__b-popup"+v+"__",q="auto"!==a.position[1],n="auto"!==a.position[0],g="fixed"===a.positionStyle,t=b.outerHeight(!0),u=b.outerWidth(!0),a.loadUrl?L():B())})};c.fn.bPopup.defaults={amsl:50,appending:!0,appendTo:"body",autoClose:!1,closeClass:"b-close",content:"ajax",contentContainer:!1,easing:"swing",escClose:!0,follow:[!0,!0],followEasing:"swing",followSpeed:500,iframeAttr:'scrolling="no" frameborder="0"',loadCallback:!1,loadData:!1,loadUrl:!1,modal:!0,modalClose:!0,modalColor:"#000",onClose:!1,onOpen:!1,opacity:.7,position:["auto","auto"],positionStyle:"absolute",scrollBar:!0,speed:250,transition:"fadeIn",transitionClose:!1,zIndex:9997}})(jQuery);
    </script>
    <style>
    #element_to_pop_up { 
        background-color:#fff;
        border-radius:15px;
        color:#000;
        display:none; 
        padding:20px;
        min-width:400px;
        min-height: 180px;
    }
    .b-close{
        cursor:pointer;
        position:absolute;
        right:10px;
        top:5px;
    }
    </style>
    <button id="my-button">POP IT UP</button>
    <!-- Element to pop up -->
    <div id="element_to_pop_up">
        <a class="b-close">x<a></a>
        Content of popup
    </div>

    Then look at the top of the code for this:

     // Binding a click event
    $('#menu-item-3144').on('click', function(e) {

    and change this ID to the ID of your menu item:
    #menu-item-3144
    then when it is clicked the popup will show. You can also adjust the html & css of the popup to suit.
    Please let us know if you need some more help with this.

    Best regards,
    Mike

    #1199000

    Hi Mike,
    The menu option I was looking to add this popup link was to a product category. How would I add this code, in the description?
    Thank you
    Lyse

    #1199054

    Hi,
    For the “popup press” according to their documentation, the trigger class needs to be added to the link, to do this try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
      ?>
      <script>
    (function ($) { 
      $(window).load(function() {
              $("#menu-item-3144 a").addClass('popup-link');
      });
      })(jQuery);
      </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    note that #menu-item-3144 is the ID for the menu item & popup-link is the class we are adding, please adjust to suit. But if the menu item is a working link to another page you may encounter a conflict, I recommend the menu item is only used for the popup trigger.
    For the other popup script you don’t need to change anything in the menu item, you just add the menu item ID to the script where the #menu-item-3144 is, when this ID is clicked the popup will show.

    Best regards,
    Mike

    #1199067

    Hi Mike,

    It doesn’t work.
    Here’s my function code snippet:

    function custom_script(){
      ?>
      <script>
    (function ($) { 
      $(window).load(function() {
              $("#menu-item-24912 a").addClass('popup-link');
      });
      })(jQuery);
      </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    Here’s what my menu option class looks like:
    https://snipboard.io/9glZ5E.jpg

    When I click on the menu item “Settings Findings” I don’t get the popup.

    What is I misunderstand or forgot to do if anything?

    Thank you for your patience.
    Lyse

    #1199295

    Hi,
    Please include an admin login to examine, so you want the trigger on the menu item “Settings Findings” and we are using the popup in the screenshot in Private Content area, correct?

    Best regards,
    Mike

    #1199314

    Hi Mike,

    Correct.
    I have added temporary login credentials below.
    Thank you
    Lyse

    #1199716

    Hi,
    Thank you, the login doesn’t seem to be working, but I don’t get an error message, please check.

    Best regards,
    Mike

    #1199728

    Hi MIke,
    I couldn’t login my self as a admin. My host has fixed the issue and it’s now working.
    Please try again.

    Thanks
    Lyse

    #1200122

    Hi,
    Thank you, I checked that the trigger class “popup-link” was added to the menu item, then I edit your popup to ensure the popup trigger class was enabled
    2020-04-02_055817.png
    and now it seems to be working, try clearing your browser cache and clicking the menu item “Settings Findings”

    Best regards,
    Mike

    #1200128

    Hi Mike,
    Thank you so much.
    I was able to implement this function on my production site without any issue!
    Again, I appreciate you help and patience.

    Have a wonderful weekend!
    Lyse

    #1200158

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Using Lightbox popup from menu option’ is closed to new replies.