use Magnific Popup for other images (not in gallery/album) on the site

[Dawn]

I’d love to avoid a lightbox conflict on my site and would love to plug into the Magnific Popup a basic overlay for other, non-gallery/album images (such as one on my home page). Is there a way to do that?

[Rattus]

Add code below to your theme functions.php:

function add_theme_scripts() {
  wp_enqueue_style( 'magnific-popup' );
  wp_enqueue_script( 'magnific-popup');
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

then somewhere in your theme’s main js file add something like this:

jQuery(document).ready(function() {
  jQuery('a').not('.gmedia_gallery a').has('img').magnificPopup({type:'image'});
});

[Dawn]

Thank you!
What class=”” or rel=”” would I apply and to the img or a tag?

[Dawn]

Perfect! I was able to do a gallery as well!

<script>
// Magnific Popup
jQuery(document).ready(function() {

	jQuery('a.magpop').not('.gmedia_gallery a').has('img').magnificPopup({
	type:'image'
	
});
// Magnific Popup Gallery
jQuery('.maggal').each(function() {
    jQuery(this).find('a').magnificPopup({
        type: 'image',
        gallery: {
          enabled:true,
          navigateByImgClick: true,
          tPrev: 'Previous',
          tNext: 'Next'
        }
    });
});

});
</script>

[Dawn]

This has been working great, but since one of the recent Gmedia plugin updates, I’m getting the following error:

TypeError: jQuery('a.magpop').not('.gmedia_gallery a').has('img').magnificPopup is not a function. (In 'jQuery('a.magpop').not('.gmedia_gallery a').has('img').magnificPopup({
		type:'image'
	})', 'jQuery('a.magpop').not('.gmedia_gallery a').has('img').magnificPopup' is undefined)

Any ideas?

[Author]

Posts