myFancybox – Fancybox 2 Plugin for WordPress

myFancybox is a simple fancybox (lightbox like) implementation for wordpress.
Plugin implements Fancybox 2.1.5 by Jānis Skarnelis and its automatically triggered by images which are linked on bigger version of themselves (.jpg, .jpeg, .bmp, .gif, .png). Plugin will automatically show title of an image, or if caption is available, it will show caption instead of title.

Click on the images below to see the plugin in action, try mousewheel (myfavourite) or keyboard arrows for scroling thru the images.

To display video add class=”fancybox-media” to your video link

<a class="fancybox-media" href="http://www.youtube.com/watch?v=kBXnJiQwMVc">My Video</a>

Supports: Youtube, Vimeo, Metacafe, Dailymotion, Google maps, Twitvid, Instagram

To display iframe

<a class="fancybox fancybox.iframe" href="http://osx86.transformnews.com/">My Iframe</a>

Example: My Iframe

Tested on WordPress 3.7.1 and 3.8.1

Download myFancybox plugin here

For now only way for editing effects and settings is via myfancybox.php file inside plugins/myfancybox folder.
Available options are:

$(".fancybox").fancybox({
	 beforeShow: function () {
        // option 1
        // get the title from "alt" attribute
        this.title = $(this.element).find("img").attr("alt");
        // option 2
        // get the title from "title" attribute in img tag
        // this.title = $(this.element).find("img").attr("title");
    },
                        padding:0,
		        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 : {}
			}
		});
});

Most of this options can be removed and than it will use fancybox defaults instead.

Feel free to play with script, edit, contribute…

16 thoughts on “myFancybox – Fancybox 2 Plugin for WordPress

  1. Hey, nice work! I have it running in a recent WordPress install (Aug 2015). However, I’m stumped in getting the button or thumbnail helpers to appear! I’ve been diving into JS files for 5 hours, no progress. Can someone confirm if all of the helpers work or am I chasing a ghost? Also, for the title helper, the parameter ‘outside’ renders nothing visible, while ‘float’ seems to work. Perhaps this is a CSS issue?

Leave a Reply

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