-
AuthorPosts
-
November 11, 2015 at 10:57 am #661259
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
});November 11, 2015 at 1:03 pm #661429Hi 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!
November 11, 2015 at 9:26 pm #661977This 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?
November 11, 2015 at 9:32 pm #6619833) 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!
November 11, 2015 at 11:15 pm #662074Hello 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.
November 12, 2015 at 12:08 am #662128Hi 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!
November 12, 2015 at 12:31 am #662151Hello 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.
November 12, 2015 at 2:36 am #662208Great 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!).
November 12, 2015 at 2:42 am #662210November 12, 2015 at 3:23 am #662236Wow, 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!
November 12, 2015 at 3:24 am #662237You 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.
November 12, 2015 at 3:59 am #662270Okay, 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.
Thanks!
November 12, 2015 at 4:46 am #662301Hi 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!
November 12, 2015 at 4:57 am #662313Awesome – got it. Thank you so much!
November 12, 2015 at 5:06 am #662321You’re a genius by the way. INCREDIBLY helpful. They should give you a raise. Seriously. Pass this along to your bosses with my compliments.
-
AuthorPosts