How to use Fancybox in WordPress, a more flexible alternative to jQuery lightbox.

This article was written by in October 22, 2013, & may not be posted on other sites!
Original source url for this article: How to use Fancybox in WordPress, a more flexible alternative to jQuery lightbox.

How to use Fancybox in WordPress, a more flexible alternative to jQuery lightbox.
Fancybox is a tool built on the jQuery library. Fancybox is a more flexible alternative to lightbox since it can show any content you want, for example Youtube and Vimeo videos, buttons, text, images, maps, HTML elements, SWF movies, Iframes, Ajax content and so on. The easiest way to enable Fancybox to your wordpress site is to use a plugin.

Fancybox functionality demo:

 

2 plugins to enable Fancybox in WordPress:

Fancybox for WordPress plugin is a good alternative, but we found some problems if you have custom jQuery in your theme. If you use this plugin your jQuery code must be placed in the theme files such as the footer.php for example, and not in a separate .js-file.
Easy fancyBox plugin for WordPress is a better alternative If you want to add custom code and use the fancybox functionality as you wish. It also works with custom jQuery in a separate file,
We recommend the “Easy FancyBox” WordPress plugin. No problems found.
This is how to use it:

  1. Download the wordpress plugin “Easy FancyBox” from your wordpress admin > plugins > Add new page or by downloading it from http://wordpress.org/plugins/easy-fancybox/ and uploading it to your wp-content > plugins folder.
  2. Activate the plugin.
  3. Just by enabling this plugin it will automatically show any elements that link directly to an image-file through the fancybox popup.
  4. Go to Settings > Media and make additional options for the Fancybox. Make sure to enable Fancybox for all the right media for example Iframe, youtube, vimeo, swf, pdf and more…

 

 

Code examples:

Exclude links from opening with FancyBox
Just add the class=”nofancybox” to the element and Fancybox will not be used.
<a class="nofancybox" href="myImage.jpg"><img src="myImageThumb.jpg" /></a>

Open external page in an Iframe using fancybox
<a class="fancybox-iframe" href="http://www.yourpage.com">This link opens an external page in an Iframe</a>

Open a pdf using fancybox
<a class="fancybox-pdf" href="your.pdf">This link opens a pdf in the fancybox</a>

Open a swf-file using fancybox
<a class="fancybox-swf" href="yourSwf.swf">This link opens a swf in the fancybox</a>

Open a Youtube video using fancybox
<a class="fancybox-youtube" href="youtubeurl&fs=1">This link opens a youtube video in the fancybox</a>
To open a Youtube video, simply copy and paste the url + &fs=1

Open a Vimeo video using fancybox
<a class="fancybox-vimeo" href="http://vimeo.com/69700933">This link opens a Vimeo video in the fancybox</a>

How to use Fancybox in WordPress, a more flexible alternative to jQuery lightbox.

 

 

Open any custom content you want in the fancybox

Using the inline option, you can create a div with any content you want for example buttons, video, text, images and so on. Just create 2 divs that will be hidden with the following attributes (the content can be placed anywhere in your html code):
<div style="display:none" class="fancybox-hidden">
<div id="myDiv">
<!--Your custom content-->
</div>
</div>

then add a link to open the content like this:
<a class="fancybox-inline" href="#myDiv">Open my inline content in a fancybox</a>
The href need to match the hidden div id, in this case #myDiv.

 

 

Images and galleries

Images will likely show in the fancybox automatically unless you add class="nofancybox"
Otherwise just add class=”fancybox” to your images. To create an album meaning grouping images together and showing them after eachother with a next arrow, just add class=”fancybox” and rel=”myGallery”. You can use different rel names to group different kind of images, for example:
<img class="fancybox" rel="myVaccation" src="/images/img01.jpg" />
<img class="fancybox" rel="myVaccation" src="/images/img01.jpg" />
<img class="fancybox" rel="myVaccation" src="/images/img01.jpg" />

<img class="fancybox" rel="myPets" src="/images/pet01.jpg" />
<img class="fancybox" rel="myPets" src="/images/pet02.jpg" />
<img class="fancybox" rel="myPets" src="/images/pet03.jpg" />

You can also create albums like this using thumbnail images:
<a class="fancybox" rel="myGallery" href="/images/img01.jpg><img src="/images/img01-thumb.jpg" /></a>

 

Fancybox css

It might be tricky to write css for your fancybox since the plugin might have a lot of inline code overriding your css. Use settings > media in your WordPress admin to specify some of the attributes. Also try to add !important to your css to override everything! For example:
width: 100% !important;

 

Fancybox functionality demo:

Learn more about Fancybox starting with the WordPress example code below

Full code below to create a wordpress page template. Add and activate wordpress plugin “Easy fancyBox” to your wordpress site. Copy and paste the code below and save it as a template in your theme folder. You can name the file “fancybox-template.php”. Put it in a folder called page-templates inside your theme folder. Then create a new page in the WordPress admin and choose the new template in the template-dropdown to the right. Save! Preview the page.

<?php
/**
* Template Name: Fancybox Template
* Author Olivia Hoback
* www.olivia.nu
*/

get_header(); ?>

<div id="primary" class="site-content">
<div id="content" role="main">

<h1>This is some example code from the Fancybox custom template:</h1>
<p>
<a class="fancybox-iframe" href="http://www.lets-develop.com/">This link opens an external page using Iframe in a fancybox</a><br />
<a class="fancybox-pdf" href="http://www.lets-develop.com/source-code/PDF.pdf">This link opens a pdf in the fancybox</a><br />
<a class="fancybox-swf" href="http://www.lets-develop.com/source-code/movie.swf">This link opens a swf in the fancybox</a><br />
<a class="fancybox-youtube" href="http://www.youtube.com/watch?v=hIXC5PH1ehw&fs=1">This link opens a Youtube video in the fancybox</a><br />
<a class="fancybox-vimeo" href="http://vimeo.com/69700933">This link opens a Vimeo video in the fancybox</a><br />
</p>
<h1>You can also create some inline content displaying anything you want like this:</h1>
<p>
<div style="display:none" class="fancybox-hidden">
<div id="myDiv" style="width:600px;height:500px;">
<h1>You can show anything you want in a fancybox</h1>
<iframe width="560" height="315" src="//www.youtube.com/embed/hIXC5PH1ehw" frameborder="0" allowfullscreen></iframe>
<p>Some text...</p>
<button type="button">A button</button>
</div>
</div>
<a href="#myDiv" class="fancybox-inline">Open my inline content in a fancybox</a>
</p>


</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>

Spread the word

Facebooktwittergoogle_pluslinkedinmail

One thought on “How to use Fancybox in WordPress, a more flexible alternative to jQuery lightbox.

  1. driving instructor warrington

    This is my first time go to see at here and i am genuinely impressed to read everthing at one place.

Leave a Reply

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