Add fancybox to ElegantThemes themes

At SunriseWeb.ca we use mostly use responsive themes from ElegantThemes.com – like Chameleon, Evolution, Nimble, Origin, and Nova – and often we want to apply a “lightbox” display for viewing image galleries.  In the past we have used a variety of plugins to do this – like Easy FancyBox by Rolf Allard van Hagen – but realized that this was duplication since ElegantThemes themes already include the Fancybox jQuery lightbox tool and load it on every page! (probably should only be loaded by pages that use the gallery and portfolio templates)

The Fancybox css and js is enqueued in ElegantThemes themes’

/epanel/page_templates/page_templates.php

and enabled by javascript in the

/epanel/page_templates/js/et-ptemplates-frontend.js

for use with the themes’ templates gallery and portfolio templates (page-gallery.php, page-template-portfolio.php)

jQuery("a[class*=fancybox]").fancybox({
		'overlayOpacity'	:	0.7,
		'overlayColor'		:	'#000000',
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		'easingIn'      	: 'easeOutBack',
		'easingOut'     	: 'easeInBack',
		'speedIn' 			: '700',
		'centerOnScroll'	: true
	});

and “video lightbox” features (i.e. et_videolink custom field is populated with a video link – some themes include a metabox for adding this for use by the portfolio template page-template-portfolio.php)

jQuery("a[class*='et_video_lightbox']").click(function(){
		var et_video_href = jQuery(this).attr('href'),
			et_video_link;

		et_vimeo = et_video_href.match(/vimeo.com\/(.*)/i);
		if ( et_vimeo != null )	et_video_link = 'http://player.vimeo.com/video/' + et_vimeo[1];
		else {
			et_youtube = et_video_href.match(/watch\?v=([^&]*)/i);
			if ( et_youtube != null ) et_video_link = 'http://youtube.com/embed/' + et_youtube[1];
		}

		jQuery.fancybox({
			'overlayOpacity'	:	0.7,
			'overlayColor'		:	'#000000',
			'autoScale'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'easingIn'      : 'easeOutBack',
			'easingOut'     : 'easeInBack',
			'type'			: 'iframe',
			'centerOnScroll'	: true,
			'speedIn' 			: '700',
			'href'			: et_video_link
		});
		return false;
	});

So we wrote a quick and dirty plugin to add the “fancybox” class to gallery links to images (i.e. exclude those galleries whose thumbnails link to the attachment posts), and add a common “rel” attribute to allow navigation through the images within the lightbox.

Here is the javascript code

jQuery(document).ready(function() {
  jQuery(".gallery a[href$='.jpg'], .gallery a[href$='.JPG'], .gallery a[href$='.png'], .gallery a[href$='.PNG'], .gallery a[href$='.gif'], .gallery a[href$='.GIF']").has("img").addClass("fancybox");
  jQuery(".gallery a:not([rel^='galleryGroup'])").has("img").attr("rel", "galleryGroup");
});

You could add this code to an existing theme js  file like

/epanel/page_templates/js/et-ptemplates-frontend.js

or 

/js/custom.js

but then you would have to be careful not to overwrite each time you updated the theme.  With a plugin you don’t have to worry about this.

You can download the simple addFancybox plugin for ElegantThemes themes here, and find the code below.

<?php
/*
Plugin Name: Add Fancybox
Description: Add fancybox lightbox to galleries - assumes fancybox js already loaded (e.g. ElegantThemes themes mostly do)
Version: 0.01
Author: Brad Trivers
Author URI: https://sunriseweb.ca
*/

/**
 * @author Brad Trivers <brad@sunriseweb.ca>
 */

add_action('template_redirect', 'addfancybox_jsregister');
function addfancybox_jsregister() {
  wp_register_script( 'addfancybox', plugins_url('add_fancybox.js', __FILE__), array( 'jquery' ));
  wp_enqueue_script( 'addfancybox' );
}
?>