Fancybox

What is Fancybox?

Click on the image of rocks below to see it in action.

Pretty rocks
Fancybox demo: click image to view
Pretty wheat
Fancybox demo 2

Adding Fancybox to images

Fancybox is automatically applied to WordPress galleries in the Meerkat theme, and no action is required on your part.

To apply fancybox to an image not in a gallery, you’ll need to edit the image details in the visual editor and provide the following values:

  • Link To should be set to Media File.
  • Link Rel is optional, but if you have multiple images you want to display in the same fancybox as a slideshow, you’ll need to use the same Link Rel value for all of them.
  • Link CSS Class should be set to fancybox.

fancybox-settings

The resulting HTML will look like this:
<a href="http://wordpress.williams.edu/files/2014/01/gallery-stones.png" class="fancybox" rel="foo"><img src="http://wordpress.williams.edu/files/2014/01/gallery-stones-300x214.png" alt="Pretty rocks" width="300" height="214" /></a>

Adding Fancybox to video

This can only be done in HTML/text mode. Add the classes “type-video” and “fancybox-video” to your link. Point your link at the URL of the video on YouTube or Vimeo. The play icon will be added automatically by applying the link classes, there’s no need to have it be part of your image.

<a class="type-video fancybox-video" href="https://www.youtube.com/embed/tqdP4RLc9LY">
<img class="noborder" src="http://wordpress.williams.edu/files/2014/02/Kellogg.png" alt="New Environmental Center" width="426" height="235" />
</a>

Demo of Fancybox video


New Environmental Center