Lightbox - markhowellsmead/helpers GitHub Wiki

Fancybox

Include http://fancyapps.com/fancybox/3/ in the Theme.

Get JS and CSS via CDN

Use the current version from https://cdnjs.com/libraries/fancybox.

For WordPress:

wp_enqueue_style('fancyboxCDN', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css');
wp_enqueue_script('fancyboxCDN', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js', ['jquery'], null, true);

Using files downloaded from fancyapps.com

wp_enqueue_style('fancybox', get_template_directory_uri() . '/assets/dist/vendor/fancybox/jquery.fancybox.min.css', [], null);
wp_enqueue_script('fancybox', get_template_directory_uri() . '/assets/dist/vendor/fancybox/jquery.fancybox.min.js', ['jquery'], null, true);

Auto-init all appropriate links

$("a[href$='.jpg']:not([target]):not([download]), a[href$='.png']:not([target]):not([download]), a[href$='.gif']:not([target]):not([download]), a[href$='.svg']:not([target]):not([download])").fancybox({
	'transitionIn': 'elastic',
	'transitionOut': 'elastic',
	'speedIn': 600, 
	'speedOut': 200, 
	'overlayShow': false
});

Add data attribute to links

data-fancybox="gallery"

If you have more than one group of images on a page, which work as separate galleries, use a unique ID for the data attribute value.

data-fancybox="gallery1"
data-fancybox="gallery2"
etc.