//
you're reading...
jQuery

Fancybox gallery for an element with a tooltip: why is the first title not showing?

Please, refer to this article as a reference how to create fancy tooltips for elements and to the Fancybox site to see how to configure it to display images and galleries.

The problem with the mentioned approach to create tooltips is that the “title” attribute gets reassigned and blanked out when we mouse over the element, but it could be used by other plugins such as Fancybox. Fancybox uses the “title” attribute to add a title to a zoomed in element. If this element also has a tooltip, then clicking on the element will result in the slide title not showing, since we didn’t exit the element yet, and the “title” attribute value didn’t get assigned back. If we have a gallery, then the titles are showing fine for the next elements since we didn’t have the mouse over them.

We can fix this problem in a very simple way, force the mouse exit event once we click on the element. The “title” attribute is assigned back as the mouse leaves the element, as this way the problem will be fixed.

Fancybox has an onStart attribute where we can call this function.

(function ($) {

$(function() {

function closeTooltip() {
$(".slide-content:visible a").trigger("mouseleave");
}
$(".slide-content a").fancybox({
'transitionIn':'elastic',
'transitionOut':'none',
'speedIn':600,
'speedOut':200,
'overlayShow':true,
'overlayColor':'#000',
'cyclic':true,
'easingIn':'easeInOutExpo',
'margin':'10px',
'onStart':function() {closeTooltip();}
});
});
}) (jQuery);

“slide-content” is a wrapper for the slide (can be a different class name) and “a” is the link for the tooltip and the Fancybox element. Now the “title” attribute will get reassigned and the slide title will be showing fine.

Advertisements

About RailsBlogger

I'm a Software Developer with over 10 years of experience, Java and Ruby on Rails.

Discussion

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: