Integrating jQuery Fancybox and Tooltips plugins

In the process of adding the lightbox plugin at fancybox.net to a client’s website, it became necessary to integrate it with the jquery tooltip plugin that was already in place and in use on the site to create styled tooltip hovers on certain of the images there.

images copyright by Nancy Carol Willis, all rights reserved

As the method of adding tooltips to the images conflicted with how the rel="" attribute was used by the lightbox for grouping sets of images, this required a bit of alteration to the lightbox plugin.

It occurred to me that rev="" as a method of grouping, would be more appropriate, seeing as rev is a backwards link (into the group) whereas rel, being a forwards link to the hidden tag’s content information for the tooltip was appropriate there.

<a href="/images/Fine_Art/FineArt_First-Forager.jpg" rel="#fa_forager" rev="fel_gallery"> <img src="/images/Fine_Art/FineArt_First-Forager_sm.jpg" alt="" width="170" height="150" /> </a>
<p id="fa_forager"><b><em>First Forager</em>,
crayon, 17 x 15</b></p>
<a href="/images/Fine_Art/FineArt_Persimmon-Poacher.jpg" rel="#fa_poacher" rev="fel_gallery"> <img src="/images/Fine_Art/FineArt_Persimmon-Poacher_sm.jpg" alt="" width="180" height="150" /> </a>
<p id="fa_poacher"><b><em>Persimmon Poacher</em>,
colored pencil, 12 x 10</b></p>

The first step was converting the lightbox plugin to use rev instead of rel, which was fairly easily accomplished. (the following is the output from diff which may be used to patch your copy of jquery.fancybox.*.js)

--- jquery.fancybox-1.3.1.js    2010-03-05 18:21:58.000000000 -0500
+++ jquery.fancybox-1.3.1-sg.js 2010-05-27 12:53:15.472485388 -0400
@@ -7,6 +7,8 @@
* Copyright (c) 2008 - 2010 Janis Skarnelis
*
* Version: 1.3.1 (05/03/2010)
+ * Version: 1.3.1-sg (May 27, 2010) - changed use of rel to rev as existing scripts on site use rel attribute for other
+ * things already and rev makes more sense as the grouping/containing gallery of the image (backwards link)
* Requires: jQuery v1.3+
*
* Dual licensed under the MIT and GPL licenses:
@@ -782,13 +784,13 @@
selectedArray   = [];
selectedIndex   = 0;

-                  var rel = $(this).attr('rel') || '';
+                  var rev = $(this).attr('rev') || '';

-                  if (!rel || rel == '' || rel === 'nofollow') {
+                  if (!rev || rev == '' || rev === 'nofollow') {
selectedArray.push(this);

} else {
-                          selectedArray   = $("a[rel=" + rel + "], area[rel=" + rel + "]");
+                          selectedArray   = $("a[rev=" + rev + "], area[rev=" + rev + "]");
selectedIndex   = selectedArray.index( this );
}

@@ -1074,4 +1076,4 @@
fancybox_init();
});

-})(jQuery);
\ No newline at end of file
+})(jQuery);

With that out of the way, the next step was simple. Take the existing jquery code that sets up the tooltips, and add the fancybox call. Except, that didn’t quite work as expected. What I wanted was to be able to pull that same tooltip info (html-styled) in as the title info overlay when the larger image was displayed in the lightbox. I couldn’t simply add it back as a title="" since that would then override the fancy jquery tooltip. Whoops.

With a little assist from the #jquery channel on freenode, I was clued into one of fancybox’s callbacks, titleFormat, and I was soon off and runnning again once I figured out how to index into the id’d element and re-extract the necessary info to add as the title. The problem was, I couldn’t use the existing bodyHandler from the tooltip() call, because by the time we’re within the fancybox() function call internals, “$(this)” didn’t point to the same thing. Double-whoops.

function formatTitle (title, currentArray, currentIndex, currentOpts) {
    return('<span id="fancybox-title-over">' + $( jQuery(currentArray[currentIndex]).attr("rel") ).html() + '</span>');
}
$( function () {
    $("a.thumb")
        .tooltip({
            track: true,
            showURL: false,
            bodyHandler: function () { return $( $(this).attr("rel") ).html(); }
        })
        .fancybox({
            'titleFormat' : formatTitle,
            'titlePosition' : 'over',
            'titleShow' : true
        });
});

Voila! Fancy tooltips and integration of the tip into the lightbox as a title overlay, with the rel attribute holding the link to the element containing the info describing each image, and the rev attribute holding the grouping information for the mini-gallery to enable users to slide back and forth among each grouping of images on the page.

The finished implementation may be viewed at the top of the page here: Nancy Carol Willis, Writings and Illustration