Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 7, 2014 at 8:18 pm #347911
    MM

    Hi guys,

    I’ve just updated to the latest version of the theme (3.0.2) from 2.8 and I’ve noticed you are using the new lightbox, Magnific Popup, instead of prettyPhoto.

    I have a menu link that used the prettyPhoto rel to open inline content inside a prettyPhoto lightbox that obviously doesn’t work anymore. I’ve seen that I can disable the modal lightbox in theme options and can just install the prettyPhoto plugin, so I’ll use that as a last resort, but I’m hoping I can just get my link to work with the new lightbox.

    I’ve looked at the Magnific website to see how they call the popup from a link but I can’t get it to work.

    Basically I have a hidden div (id=’loginbox’) in my child theme’s header.php, which uses do_shortcode to call a custom login form. I then have a menu item with the URL as #loginbox. Under prettyPhoto, I just had to add the word ‘prettyPhoto’ to the Link Relationship (XFN) box and my div content would open up in the lightbox.

    What do I need to do now to get the content to open in the new lightbox? I’ve tried adding ‘iframe=true’ to the Link Relationship, but that didn’t work. Any ideas please?

    Thanks,
    Matt

    November 8, 2014 at 12:53 am #348015
    Elliott

    Hey meanster99!

    Try adding this to the bottom of your functions.php file.

    add_action( 'wp_head', 'enfold_customization_add_magnific_handler' );
function enfold_customization_add_magnific_handler() {
	?>
	<script type = "text/javascript">
	jQuery(document).ready(function() {
		jQuery('a[rel=magnific]').magnificPopup({
			type: 'inline',
			preloader: false,
		});
	});
	</script>
<?php
}

    And then for your link make sure the rel attribute (the link relationship XFN you were referring to) is set to magnific and the URL is set to the ID of whatever element you want to display in the popup.

    <div id = "form_popup" style = "color: white;">Testing</div>
<a href = "#form_popup" rel = "magnific">Click me</a>

    Cheers!
    Elliott

    • This reply was modified 10 years ago by Elliott.
    November 8, 2014 at 7:24 am #348091
    MM

    Hi Elliot,

    Great stuff thanks! For the benefit of anyone else trying something similar, I had to ensure I added some classes to the content div aswell:

    e.g.

    <div class=”white-popup mfp-hide”>my inline content</div>

    .white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width:auto;
    max-width: 500px;
    margin: 20px auto;
    }

    The mfp-hide is a magnificpopup built in class, but it’s important to include it. It took me a while to figure out I needed that rather than style=”display:none;” which I had before but meant the popup didn’t work.

    Thanks,
    Matt

    November 9, 2014 at 8:26 pm #348439
    Andy

    Hey!

    Thanks, and glad you did it!
    If you have any more questions we are happy to assist you.

    Cheers!
    Andy

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Menu link to open content in new lightbox (magnific popup)’ is closed to new replies.