Event listener examples for dimsemenov's Magnific Popup. The library can be installed from here https://github.com/dimsemenov/Magnific-Popup. #lightbox #popup

README.md

Event listener examples for dimsemenov's Magnific Popup.

The library can be installed from here [https://github.com/dimsemenov/Magnific-Popup].

Updated FOundationPress Zurb 6.4

via Bower bower install magnific-popup --save

WordPress Notes

These are some notes as to how to use Magnific Popup with Ole Fredrik's FoundationPress which is is a WordPress starter theme based on Foundation 6 by Zurb [https://foundationpress.olefredrik.com].

Usage

gulpfile.js

// Include your own custom scripts (located in the custom folder)

'assets/javascript/custom/*.js',

'assets/components/magnific-popup/dist/jquery.magnific-popup.min.js',

foundation.scss

// Libraries
@import '../components/magnific-popup/dist/magnific-popup';

Gallery/Image Sources

The two main ways to add images for use in a lightbox in WordPress are through an ACF field group or through the WYSIWYG editor.

ACF (Advanced Custom Fields)

_magnific-popup-event-listener.js will handle images added through an ACF field group.

WYSIWYG

Single Image

_wordpress-magnific-popup-event-listener.js will handle images added with the Add Media button in the WYSIWYG.

Adding images this way requires the user to set some image setting through the Media Manager interface.

Image CSS Class should be thumbnail

Link CSS Class should be lightbox

The image caption is used to display the caption underneath the image and the alt text is used as the lightbox popup description.

Gallery Images

_wordpress-gallery-magnific-popup-event-listener.js will handle images added with [gallery] shortcode. This may also require the use of the sass stylesheet _wordpress-gallery-magnific-popup-event-listener.scss.

All JavaScript files should be placed in assets/javascript/custom directory. These can also be combined as needed.

_all.js

/** ref: http://dimsemenov.com/plugins/magnific-popup/ */
jQuery(document).ready(function ($) {
	var small='';
	if (typeof site !== 'undefined') {
		small = '<small>'+site.name+' - '+site.description+'</small>';
	}
    $("article.main-content").each(function() { // the containers for all your galleries
        $(this).magnificPopup({
            delegate: ".gallery-item a", // the selector for gallery item
            type: "image",
            gallery: {
              enabled:true
            },
            image: {
                tError: "<a href=\"%url%\">The image #%curr%</a> could not be loaded.",
                titleSrc: function(item) {
                	var title = item.el.context.firstChild.alt;
                	console.log(item.el.context.firstChild);
                	console.log('title',title);
					if (typeof title !== "undefined" &&  title !== '') {
						return title + small;
					}
					else {
						title = item.el.attr('title');
						if (typeof title !== "undefined") {
							return item.el.attr('title')+small;
						}
						else {
							return small;
						}					
					}						
                }
            }        
        });
    });	
});

_magnific-popup-event-listener.js

/** ref: http://dimsemenov.com/plugins/magnific-popup/ */
jQuery(document).ready(function ($) {
	var small='';
	if (typeof site !== 'undefined') {
		small = '<small>'+site.name+' - '+site.description+'</small>';
	}
	$('.lightbox-gallery').each(function() { // the containers for all your galleries
	    $(this).magnificPopup({
	        delegate: 'a.lightbox', // the selector for gallery item
	        type: 'image',
	        gallery: {
	          enabled:true
	        },
			image: {
				tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
				titleSrc: function(item) {
				    if (typeof item.el.attr('title') !== 'undefined') {
					return item.el.attr('title') + small;
				    }
				    else {
					return small;
				    }
				}
			}        
	    });
	});
	$('.image-popup-vertical-fit').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		mainClass: 'mfp-img-mobile',
		image: {
			verticalFit: true,
			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
			titleSrc: function(item) {
				return item.el.attr('title') + '<small>Featured Image</small>';
			}
		}
	});
});

_wordpress-gallery-magnific-popup-event-listener.js

/** ref: http://dimsemenov.com/plugins/magnific-popup/ */

// This is used for gallery images added through the WYSIWYG editor

jQuery(document).ready(function ($) {
    $("div.gallery").each(function() { // the containers for all your galleries
        $(this).magnificPopup({
            delegate: ".gallery-item a", // the selector for gallery item
            type: "image",
            gallery: {
              enabled:true
            },
            image: {
                tError: "<a href=\"%url%\">The image #%curr%</a> could not be loaded.",
                titleSrc: function(item) {
                	var title = item.el.context.firstChild.alt;
                	console.log('title',title);
					if (typeof title !== "undefined" &&  title !== '') {
						return title + small;
					}
					else {
						title = item.el.attr('title');
						if (typeof title !== "undefined") {
							return 'Gallery Image: <i>'+item.el.attr('title')+'</i>'+small;
						}
						else {
							return small;
						}					
					}						
                }
            }        
        });
    }); 	
});

_wordpress-gallery-magnific-popup-event-listener.scss

//@start WordPress gallery
figure.gallery-item img {
	@extend .thumbnail;
}
.entry-content {
	.gallery {
		figure.gallery-item {
			@extend .column;
			@extend .column-block;
			text-align: center;
		}	
	}	
	.gallery.gallery-columns-2, .gallery.gallery-columns-4, .gallery.gallery-columns-6, .gallery.gallery-columns-8 {
		@extend .row;
		@extend .small-up-2;
		@extend .medium-up-2;
		@extend .large-up-2;	
	}
	.gallery.gallery-columns-3, .gallery.gallery-columns-6, .gallery.gallery-columns-9, .gallery.gallery-columns-12 {
		@extend .row;
		@extend .small-up-3;
		@extend .medium-up-3;
		@extend .large-up-3;	
	}		
}
//@end WordPress gallery

_wordpress-magnific-popup-event-listener.js

/** ref: http://dimsemenov.com/plugins/magnific-popup/ */

// This is used for non-gallery images added through the WYSIWYG editor

jQuery(document).ready(function ($) {
	var small='';
	// site is a global variable that is declared in a php file
	if (typeof site !== 'undefined') {
		small = '<small>'+site.name+' - '+site.description+'</small>';
		console.log('site', site);
	}
	$('article.main-content').each(function() { // the containers for all your galleries
	    $(this).magnificPopup({
	        delegate: 'a.lightbox', // the selector for gallery item
	        type: 'image',
	        gallery: {
	          enabled:true
	        },
			image: {
				tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
				titleSrc: function(item) {
					var title;
					title = item.el.context.firstChild.alt;
					console.log('title',title);
					if (typeof title !== "undefined" &&  title !== '') {
						return title + small;
					}
					else {
						title = item.el.attr('title');
						if (typeof title !== "undefined") {
							return 'Featured Image: <i>'+item.el.attr('title')+'</i>'+small;
						}
						else {
							return small;
						}					
					}
				}
			}        
	    });
	});
});