Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #661259

    DaveinJapan
    Participant

    Hi. I’m attempting to create a lightbox mailchimp signup form on my site, activated by a button. Following the instructions of other posts here, I created a child theme, created the form on a page, and added code to the custom.php file. At this point I’m stuck. How do I put that form into the lightbox (what shortcode do I use and where to I put it, in other words) and how do I designate a button to activate it? Thanks in advance for your trouble! Sincerely, Dave Haskell

    Here’s the form I’ve created on one of my x-child theme pages:

    http://haskellbooks.com/get-my-free-novel/

    Here’s the code I added to the child theme’s custom.php file:

    add_action(‘wp_footer’, function() {
    ?>
    <script type=’text/javascript’ src='<?php echo get_site_url(); ?>/wp-content/plugins/cornerstone/assets/js/dist/site/vendor-ilightbox.min.js’></script>
    <script id=”x-responsive-lightbox-1″>jQuery(document).ready(function(){jQuery(‘.show-lightbox a’).iLightBox({skin: ‘light’,overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: ‘horizontal’,controls: {thumbnail: false}});});</script><script id=”x-responsive-lightbox-2″>jQuery(document).ready(function(){jQuery(‘.show-lightbox a’).iLightBox({skin: ‘light’,overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: ‘horizontal’,controls: {thumbnail: false}});});</script>
    <?php
    });

    #661429

    Zeshan
    Member

    Hi Dave,

    Thanks for writing in!

    Please follow these steps:

    1: Now that you have set up a form page, you can select Blank – No Container | No Header, No Footer as the page template of “Get My Free Novel” page.

    2: Then, in your homepage or any other page where you want to add the link, add a button and under its HREF field, insert the URL of form page.

    3: After that, add a class of open-lightbox to the button under Class field of its settings (see: http://prntscr.com/7qeolc).

    4: Then add a Text element in Cornerstone and insert following shortcode in it:

    [lightbox selector=".open-lightbox"]

    You should now be able to open the form in a lightbox by clicking that button.

    Let us know how it goes. Thank you!

    #661977

    DaveinJapan
    Participant

    This is great, thanks very much! It worked perfectly. I have a couple more questions if you don’t mind…

    1) How do I add an “X” box in the upper right corner so people can close the lightbox if they don’t wish to enter their email?

    2) Is it possible to add this same sort of button/lightbox setup to a Revolution Slider slide?

    #661983

    DaveinJapan
    Participant

    3) Once the email address is entered, the lightbox seems to remain opened as well, rather than shutting down and returning to the page. Is there a way to prompt it to disappear after the action is taken?

    Thanks again. This is really excellent help you guys are offering!

    #662074

    Lely
    Moderator

    Hello Dave,

    Can you give us the link to the page with button that launch a lightbox? I can’t find it on your homepage. If lightbox is active, there’s a close button by default. We don’t need to add it. Please clarify.

    #662128

    DaveinJapan
    Participant

    Hi again. Here’s the testing page with the button.

    http://haskellbooks.com/buttons/

    I just noticed a very tiny x (a red one next to a full screen button, appearing in the upper left corner of the screen). Sorry, I missed it the first few tests (it’s REALLY small lol). I guess I’m accustomed to one appearing on the corner of the lightbox itself. Is that adjustable by any chance?

    Any info on the other two questions (particularly installing it within a revolution slider – that’s be absolutely perfect for my needs)? Thanks for all the help so far!

    #662151

    Rue Nel
    Moderator

    Hello There,

    Thanks for the updates!

    If you want to change the position or size of the close and fullscreen icon, you may add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

    .ilightbox-toolbar.light {
        top: 50px;
        left: 50px;
        border: none;
    }
    
    .ilightbox-toolbar.light a {
        margin-right: 15px;
    }
    
    .ilightbox-toolbar.light a.ilightbox-close:before {
        font-size: 30px;
    }
    
    .ilightbox-toolbar.light a.ilightbox-fullscreen:before {
        font-size: 20px;
    }

    To get this work in the slider, simply add a button in your slide and insert a custom class ‘open-lightbox’. Hope this helps. Please let us know how it goes.

    #662208

    DaveinJapan
    Participant

    Great info, thanks! I’m sure this last one is a stupid question, but where exactly do I insert the custom class? Inside the HTML code for the button itself? Or in the cornerstone code section on the page? Or somewhere else within Revolution Slider?

    I’m sure that’s an easy one, and you’ve been amazingly helpful. Thanks so much! (sorry if this last little bit might take a try or two for me, I’m pretty new at this stuff and amazed this theme can do so much!).

    #662210

    Rue Nel
    Moderator

    Hello Again,

    To add a custom class to your button inside your slide, simply select your button and find the “Attributes”.

    Hope this helps. Please let us know how it goes.

    #662236

    DaveinJapan
    Participant

    Wow, that was quick. Either you’re up all night, or else you live near me (I’m in Japan) lol.

    Okay, I tried it, but it’s not working yet. I assume I need to put the [lightbox selector=”.open-lightbox”] shortcode someplace within the slider? Does it go inside the HTML code on the layer itself?

    It’s on my homepage at http://haskellbooks.com if you’d like to see what’s going on.

    Sorry for the trouble, you’re being incredibly helpful!

    #662237

    DaveinJapan
    Participant

    You can see how at the moment it’s just opening up the page the lightbox form is on, rather than opening the lightbox itself. I’m sure there’s a very simple solution I’m missing. 🙂

    #662270

    DaveinJapan
    Participant

    Okay, I figured it out (I added a text section to the page and put the shortcode there).

    Could you take a quick look at the page though please. The lightbox is appearing now but it’s like a repeating carousel. I’d just like the one form to appear.

    http://haskellbooks.com

    Thanks!

    #662301

    Zeshan
    Member

    Hi Dave,

    This is because Revolution Slider generates duplicate slides and thus also adds multiple instances of the same button that causes to open a lightbox gallery. To avoid this, you could try using this CSS under Custom > CSS in the Customizer:

    .home .ilightbox-holder.light.ilightbox-next, .home .ilightbox-holder.light.ilightbox-prev {
        display: none !important;
    }

    Thank you!

    #662313

    DaveinJapan
    Participant

    Awesome – got it. Thank you so much!

    #662321

    DaveinJapan
    Participant

    You’re a genius by the way. INCREDIBLY helpful. They should give you a raise. Seriously. Pass this along to your bosses with my compliments. 🙂