SunriseWeb.ca

  • Websites
    • Recent Projects
    • PEI Web Presence Program
    • WordPress.com
    • Your Custom Website
    • Website Features
    • Website Hosting
    • WordPress Basics
  • Email Marketing
  • Web Development
    • WordPress Plugins
    • Web Applications
    • Google Apps
  • News & Updates
    • Recent Projects
    • Blog
    • Business
    • Web
    • WordPress Plugins
  • Contact – (902) 940-5034
    • Contact
    • About
    • Community
      • Red Island Relay
      • Lobster Carnival
    • Site Map
You are here: Home / Blog / WordPress Plugins / Add fancybox to ElegantThemes themes

Add fancybox to ElegantThemes themes

December 4, 2012 by Brad Trivers

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.

addFancybox plugin for ElegantThemes themes

 

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' );
}
?>

 

  • Tweet
  • More
  • Print

Filed Under: WordPress Plugins

Subscribe to our mailing list

Get ideas for your web presence, helpful links and tips, and updates about our latest projects.

About Brad

Husband and father of two. PEI MLA for Rustico-Emerald. WordPress Developer. Kitchen party musician. Oldtimer hockey player. Follow me at @bradtrivers or view my personal website BradTrivers.com. Read More…

About Karen

Wife and mother of two. Industrial engineer, P. Eng., Chief Financial Officer, head of quality assurance, web designer. Read More…

Canva – The Online Design Tool Everyone Is Raving About

Design anything in minutes with thousands of beautiful templates and images from Canva.

Try Canva Pro Today

Get online quickly!

WordPress.com The Premium Plan for a website with WordPress.com costs $120/year and includes a domain name. Contact me to get started.

Sell Products and Services Online

We recommend and use WooCommerce for online shops. WooCommerce

Project Categories

  • Genesis Themes
  • Elegant Themes
  • Divi Theme
  • WooCommerce
  • WordPress.com

Copyright © 2021 · Agency Pro Theme on Genesis Framework · WordPress · Log in