Lightbox + FancyTooltips Bug Fix
Published Tuesday, July 25, 2006 @ 8:04 pm • 10 Responses
For those of us enjoying the stylish functionality of Lightbox or any of its many incarnations, images "magically" overlay the window and unfold, revealing navigational buttons, image count, and of course the image titles.
For those of us enjoying the stylish functionality of FancyTooltips or any of its many incarnations, title and alt attributes manifest as stylish displays of CSS brilliance.
However, for those of us employing both features, there is a potential JavaScript conflict. This conflict makes it impossible for Lightbox to display the contents of title attributes associated with images. Thus, if you are employing Lightbox (or one of its many variations) and FancyTooltips (or one of its many variations), image titles will be missing from your Lightbox-displayed images. If this is the case, everything else (nav buttons, number display, close button) will display properly, including the "fancy" tooltips. If this sounds like your situation — missing Lightbox titles — we have good news..
Fortunately, the "fix" for this "bug" is relatively simple. Before getting to that, it is important to explain two things: (1) cause of the conflict and (2) verification of the conflict. Keep in mind that we are attempting to extrapolate from several specific scenarios to many possible configurations. So, if this article fails to fix your specific setup, hopefully it will provide insight toward an individually deduced solution.
First, let's examine the cause of the conflict. Generally speaking, JavaScript-based tooltip enhancement involves replacing title and/or alt attributes with author-specified "hooks" that enable scripts to function. For example, the FancyTooltips script rewrites all title="" attributes as fancytooltip="", thereby enabling the FancyTooltips script to recognize and act upon such attributes exclusively.
The problem is that once all of the title="" attributes have been replaced with script-specific hooks, Lightbox no longer recognizes them, making it impossible to display their contents. Hence the mysteriously missing Lightbox titles. To verify this, use your browser's "Save Page As…" feature to save an offline copy1 of a page that uses both Lightbox and FancyTooltips (or any other similarly conflicting scripts). Then, examine the source code of the offline copy and look for title="" attributes replaced by fancytooltip="". If you find that the title and/or alt attributes have indeed been rewritten, read on for the fix!
The Fix
Now that you hopefully understand the nature of the dilemma, it is time to completely eliminate the conflict.
Open your lightbox.js file and scroll down to around line #333, searching for the following:
// if image is NOT part of a set..
if((imageLink.getAttribute('rel') == 'lightbox')){
// add single image to imageArray
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
} else {
// if image is part of a set..
// loop through anchors, find other images in set, and add them to imageArray
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
}
}
imageArray.removeDuplicates();
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
}Now, near the end of the fourth line, replace title with fancytooltip. Then, likewise, near the end of the eleventh line, replace title with fancytooltip. You're done. Upload the file and check tooltips and Lightbox images. You should now be enjoying titles in your image popups and titles in your fancy tooltips. Note that this easy fix may be generalized to any set of similarly conflicting scripts. Simply determine the rewritten attributes by saving an offline copy and then search for & replace the offending values in the corresponding scripts.
This article is a work in progress. Please contribute any helpful information by leaving a comment below or via the Contact form. God Bless.
Footnotes
- 1 In general, offline copies are very useful troubleshooting tools, as they represent the code after scripts have acted upon it, thereby offering a more accurate view of what the browser actually interprets.
About this article
Related articles
Dialogue
10 Responses Jump to comment form
December 5, 2007 at 9:08 am
Holy cow, this could be it. I have searched far and wide for this. Only thing is I’m using Thickbock, by Cody Lidnley.
If you could provide any insight on how to modify that script accordingly it would be fantastic
Thanks
December 10, 2007 at 11:04 pm
Never mind trying to troubleshoot this. It’s not possible to do exactly what I want. I have figured out how to allow the title thru to thickbox with any tooltip script out there, but as soon as you do you get the FF regular tooltip as well, derived from the newly allowed title attrib. I want IE and FF to both show a fancy tooltip of my choosing, neither IE nor FF to show a regular tooltip, and the Lightbox/thickbox/etc. to show its caption. This does not appear to be possible. Any thoughts on this are welcome. I would also settle for a js tooltip that only worked in IE, then FF could just use the title attrib to do a regular tooltip, but I can’t find any such IE-only tooltips. Email included.
Thanks
October 18, 2008 at 5:38 am
Hi, I have had the problem that my light-box is positioned either near the bottom ofmy browser window in FF and at the top in IE, and I have read that many other users are having a similar problem.
Basically I wanted my light-box to appear just below the top of the browser window (dynamic to where the page is currently scrolled to…) in both IE and FF, but could not find a solution to this on the forums….
I looked through the JA and played about a bit and came up with a v-simple a solution - it is a bit of a “fudge” but it seems to work.
Locate the following line of code in the lightbox.js file:
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 40);
and change it to:
var lightboxTop = arrayPageScroll[1] + ((document.viewport.getHeight() / 100) + 50);
Like I say, its a bit of a “fudge”, but basically I divide the height by 100 (you can increase this to be safe - i.e. if you have an exceptionally long page). This division places the light-box at the top of the screen in FF and as the light-box is already at the top of the screen in IE it makes no difference as it cannot be moved up any higher in any case. I then add 50 to the current integer (the top of the browser window) pushing the light-box position down 50px so it is in the same position in both browsers (50px from the top off the browser window). This 50 integer value can be changed depending on how far you want to push your light-box down.
February 19, 2009 at 10:48 am
I am having a similar problem as discussed, but I’m using the qTip tooltip and FancyBox image gallery (similar to light box). The problem I’ve encountered is qTip doesn’t change the title tag, but hijacks it, keeping FancyBox from displaying it.
I’ve tried tinkering with the code, and got it to halfway work, but now the qTip tooltip displays as well as the generic IE “tooltip”.
When you get a chance can you look these up and see if there is a workaround for them?
Thanks.
[ Comments are closed for this post. ]
If you have additional information, contact me.
← Previous post • Next post →
« Website Attack Recovery • New Online Vector Drawing Tool »
1 • Andrew
August 27, 2007 at 7:21 pm
Thanks for this fix. I implemented this into slimbox (lighter version of lightbox), which needed a slight bit of tweaking. Where it says link.title and el.title, remember to change these to link.getAttribute(’fancytooltip’) and el.getAttribute(’fancytooltip’).