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:
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'); ?> |
Fantastic! Thanks. Still works perfect.
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
hello,
I can’t return value input in the frame to the parent window
thanks
THANK YOU VERY MUCH !
GREAT ARTICLE, AWESOME PLUGIN !
I’ll be using it for my first free theme.
THANKS A LOT AGAIN 😉
Great, I’m glad that I could help! Thanks for your feedback.
It was a really useful post. Thanks.
yes