How to implement fancyBox in WordPress – creating your own plugin

Ok first of all, you will need original fancyBox script created by Jānis Skarnelis that can be found at fancyapps.com/fancybox/. In this tutorial I used latest fancyBox version 2.1.5

Once you finish download, create new folder and call it myfancybox.  Extract the fancyapps-fancyBox-v2.1.5-0.zip file and copy all content from fancyapps-fancyBox folder to myfancybox folder. You can skip demo folder if you want to save some space.

Contents of the myfancybox should now look like this:create_folder

Now create a new file, I called it init.php, but you can call it whatever you like and save it inside myfancybox folder. Open file for edit.
This will be our main plugin file so the header part should look like this. You can rename Plugin name if u want and enter your description, add credits etc…

<?php     
   /*
    Plugin Name: myFancybox 
    Plugin URI: 
    Description:  
    Version: 
    Author: 
    License: 
    */

Now we need to create fancybox function. By default this function will automatically load all images that can be found on page or post and are linked on bigger self. Function ads class and rel on images found on page or post, and group them in album by rel tag.
Function also automatically show title of an image using alt tag, or if caption is available, it will show caption instead of title.

//  create Fancybox Function  //
function fancybox() {
?>
 
<script type="text/javascript">
 
	jQuery(document).ready(function($){	
		var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]'); // select image files
		select.attr('data-fancybox-group', 'gallery'); //data-fancybox-group is used instead of rel tag in html5
		select.attr('class', 'fancybox'); // ads class tag to image
		select.fancybox();	
 
$(".fancybox").fancybox({
	 beforeShow: function () {
         this.title = $(this.element).find("img").attr("alt"); // shows alt tag as image title
    },
		padding:0, //  settings can be removed to use defaults  //
		margin  : 20, 
		wrapCSS    : '',
		openEffect : 'elastic',
		openSpeed  : 650,
                arrows    : true,
	        closeEffect : 'elastic',
                closeSpeed  : 650,
                closeBtn  : true,
	        closeClick : false,
                nextClick  : false,
		prevEffect : 'elastic',
		prevSpeed  : 650,
		nextEffect : 'elastic',
		nextSpeed  : 650,
		pixelRatio: 1, // Set to 2 for retina display support
	     	autoSize   : true,
	        autoHeight : false,
	        autoWidth  : false,
	        autoResize  : true,
	        fitToView   : true,
		aspectRatio : false,
		topRatio    : 0.5,
		leftRatio   : 0.5,
		scrolling : 'auto', // 'auto', 'yes' or 'no'
	        mouseWheel : true,
		autoPlay   : false,
	        playSpeed  : 3000,
		preload    : 3,
	        modal      : false,
		loop       : true,
           helpers : {
	        title : {
		     type : 'inside', // outside
			}
		}
	});							
 
$(".fancybox-media")
	.fancybox({
		openEffect : 'none',
		closeEffect : 'none',
		prevEffect : 'none',
		nextEffect : 'none',
	        arrows : false,
	helpers : {
		media : {},
		buttons : {}
		}
       });
});
</script>

Function use two classes, first .fancybox that is used for images automatically and second .fancybox-media used for manual video embed.
You can change settings to suite your needs, I put a lot of them, just to see what I can do with all of them. But mostly can be removed and than it will use fancybox defaults instead.

At the end of the init.php file we need to include fancybox scripts:

<?php 
}
    wp_enqueue_style("jquery.fancybox",WP_PLUGIN_URL."/myfancybox/source/jquery.fancybox.css",false,"2.1.5");
    wp_enqueue_script("jquery");
    wp_enqueue_script("jquery.fancybox", WP_PLUGIN_URL."/myfancybox/source/jquery.fancybox.pack.js", array("jquery"), "2.1.5",1);
    wp_enqueue_script("jquery.fancyboxmousewheel", WP_PLUGIN_URL."/myfancybox/lib/jquery.mousewheel-3.0.6.pack.js", "3.0.6",1);	
    wp_enqueue_script("jquery.fancyboxmedia", WP_PLUGIN_URL."/myfancybox/source/helpers/jquery.fancybox-media.js", array("jquery"), "1.0.6",1);	
    add_action('wp_head', 'fancybox'); 
?>

Save and close your init.php file.

To change fancybox background color to black like in demo you will need to edit jquery.fancybox.css file located inside myfancybox/source directory. Open file and edit .fancybox-skin class background to desired color.

.fancybox-skin {
	position: relative;
	background: #000; /*background: #f9f9f9;*/
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

To install plugin simply copy myfancybox folder to wordpress wp-content/plugins folder and activate it in admin panel under Plugins.
You can also zip myfancybox folder and upload it and install via admin panel under Plugins / add new as any other plugin.

See it in action – Download a plugin myFancybox simple fancyBox implementation for WordPress

And here goes our full code of init.php :

<?php     
   /*
    Plugin Name: myFancybox 
    Plugin URI: http://wordpress.transformnews.com/plugins/myfancybox-simple-fancybox-implementation-for-wordpress-4
    Description: Simple jQuery Implementation of the FancyBox v2.1.5 for Wordpress. 
	fancyBox is created by Jānis Skarnelis and original source code can be found at http://fancyapps.com/fancybox/ 
	fancyBox is licensed under Creative Commons Attribution-NonCommercial 3.0 license - http://creativecommons.org/licenses/by-nc/3.0/ 
    Version: 1.0 beta
    Author: m.r.d.a
    License: Creative Commons 
    */
 
//  create Fancybox Function  //
function fancybox() {
?>
 
<script type="text/javascript">
 
	jQuery(document).ready(function($){	
		var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]'); // select image files
		select.attr('data-fancybox-group', 'gallery'); //data-fancybox-group is used instead of rel tag in html5
		select.attr('class', 'fancybox'); // ads class tag to image
		select.fancybox();	
 
$(".fancybox").fancybox({
	 beforeShow: function () {
         this.title = $(this.element).find("img").attr("alt"); // shows alt tag as image title
    },
		padding:0, //  settings can be removed to use defaults  //
		margin  : 20,
		wrapCSS    : '',
		openEffect : 'elastic',
		openSpeed  : 650,
                arrows    : true,
	        closeEffect : 'elastic',
                closeSpeed  : 650,
                closeBtn  : true,
	        closeClick : false,
                nextClick  : false,
		prevEffect : 'elastic',
		prevSpeed  : 650,
		nextEffect : 'elastic',
		nextSpeed  : 650,
		pixelRatio: 1, // Set to 2 for retina display support
	     	autoSize   : true,
	        autoHeight : false,
	        autoWidth  : false,
	        autoResize  : true,
	        fitToView   : true,
		aspectRatio : false,
		topRatio    : 0.5,
		leftRatio   : 0.5,
		scrolling : 'auto', // 'auto', 'yes' or 'no'
	        mouseWheel : true,
		autoPlay   : false,
	        playSpeed  : 3000,
		preload    : 3,
	        modal      : false,
		loop       : true,
           helpers : {
	        title : {
		     type : 'inside', // outside
			}
		}
	});							
 
$(".fancybox-media")
	.fancybox({
		openEffect : 'none',
		closeEffect : 'none',
		prevEffect : 'none',
		nextEffect : 'none',
	        arrows : false,
	helpers : {
		media : {},
		buttons : {}
		}
       });
});
</script>
 
<?php 
}
    wp_enqueue_style("jquery.fancybox",WP_PLUGIN_URL."/myfancybox/source/jquery.fancybox.css",false,"2.1.5");
    wp_enqueue_script("jquery");
    wp_enqueue_script("jquery.fancybox", WP_PLUGIN_URL."/myfancybox/source/jquery.fancybox.pack.js", array("jquery"), "2.1.5",1);
    wp_enqueue_script("jquery.fancyboxmousewheel", WP_PLUGIN_URL."/myfancybox/lib/jquery.mousewheel-3.0.6.pack.js", "3.0.6",1);	
    wp_enqueue_script("jquery.fancyboxmedia", WP_PLUGIN_URL."/myfancybox/source/helpers/jquery.fancybox-media.js", array("jquery"), "1.0.6",1);	
    add_action('wp_head', 'fancybox'); 
?>

6 thoughts on “How to implement fancyBox in WordPress – creating your own plugin

  1. Hi.

    Thx for the tutorial.

    I still have a question.

    I tried this to set up a lightbox in my wordpress menu ( I tried CSS class fancybox-buttons and fancybox-media) but it’s not working at all.
    I would like to put an external webpage in the lightbox that works well on Iphone/Ipad.

    Can you give me some advices ?

    Thx you

Leave a Reply

Your email address will not be published. Required fields are marked *