How to Install FancyBox Lightbox on a WordPress Website

Posted in Code Snippets, Website Tips, Wordpress

How to Install FancyBox Lightbox on a WordPress Website

1. Paste this code after the opening tag and before the closing tag in your header.php file. (Just after the lines that start with “” is a good spot.)

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

2. Paste this code in your header.php file, JUST BEFORE the closing tag.

<script type="text/javascript">
$(document).ready(function() {

	/* This is basic - uses default settings */
	
	$("a#single_image").fancybox();
		
	/* Using custom settings */
	
	$("a#inline").fancybox({
		'hideOnContentClick': false
	});

	/* Apply fancybox to multiple items */
	
	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	
});
</script>

3. In your Theme folder, create a New Folder called "fancybox".

4. Download the fancybox .zip at fancybox.net by clicking the download button in the upper right corner. Extract the .zip file. Then, copy these 2 files into the "fancybox" folder you created.
jquery.fancybox-1.3.4.pack.js
jquery.fancybox-1.3.4.css

5. Add the link with the proper link ID (shown below) in your post, page, or theme files. You can have anything pop up in the lightbox, an image, inline text, iframe, etc.

Ex. For inline text, use the sample code below, keeping the id="inline", but changing everything else.

<a id="inline" href="#data">This shows content of element who has id="data"</a>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

For images, iframes, and more, check out Fancybox's documentation here (scroll down to #4).

Note: In step #2, I have 'hideOnContentClick' set to false, because it contains an html form that must be filled out. If you're using the inline for an informational popup, change this to true, so that any click anywhere on the screen will close the lightbox popup.