Fancybox Plugin

The Fancybox plugin adds the fancybox media viewer from http://www.fancybox.net to your blog allowing you to use it within your posts. Here is the description from the fancybox website: FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It was built using the jQuery library. It can display images, HTML elements, SWF movies, Iframes and also Ajax requests

Settings, Settings, & Settings

Plugin Settings:

Enable “mouse-wheel” navigation: Using fancybox you can make the media (images etc) in your posts into a gallery. Tick this setting if you want to allow your visitors to use their mouse-wheel to scroll through your gallery items.
Fancybox JQuery Selector: The fancybox JQuery selector determines how fancybox will interact with the media on your site. This plugin comes with two pre-set selectors (see below). If you know a little about fancybox and JQuery you will be able to further configure fancybox using this setting but you can use it as is if you prefer.

User Settings:

This plugin has no user settings.

Blog Settings:

This plugin has no blog settings.

Widget Settings:

This plugin has no widget settings.

More Info, Credits & Links

More Info:

This plugin comes with two pre-set selectors. These are:

$("a.fancybox").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
});

$("a.fancybox_group").fancybox();

This means that to use fancybox for a single image all you need to do is add a class called ‘fancybox’ to the link to the image. Something like this:

<a class="fancybox" href="http://link-to-larger-image.jpg">
    <img src="http://link-to-thumbnail.jpg"/>
</a>

To make a gallery of images all you need to do is add a class called ‘fancybox_group’ to the links and a rel=”groupname” to define the groups. Something like this:

<a class="fancybox_group" rel="group1" href="http://link-to-larger-image1.jpg">
    <img src="http://link-to-thumbnail1.jpg"/>
</a>
<a class="fancybox_group" rel="group1" href="http://link-to-larger-image2.jpg">
    <img src="http://link-to-thumbnail2.jpg"/>
</a>
<a class="fancybox_group" rel="group2" href="http://link-to-larger-image3.jpg">
    <img src="http://link-to-thumbnail3.jpg"/>
</a>
<a class="fancybox_group" rel="group2" href="http://link-to-larger-image4.jpg">
    <img src="http://link-to-thumbnail4.jpg"/>
</a>
<a class="fancybox_group" rel="group2" href="http://link-to-larger-image5.jpg">
    <img src="http://link-to-thumbnail5.jpg"/>
</a>

The above html code will create two galleries of images, group1 with two images and group2 with three images.

Credits:

Author: Hacking Quam Plures
Uses the Fancybox Library

Links:

You can download this file and more from the Hacking Quam Plures plugin repository