Lightbox + FancyTooltips Bug Fix

♦ Posted by Jeff Starr in JavaScript, WordPress

Updated August 1, 2018 • 10 comments

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. Likewise, 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 that your visitors will love.

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..

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 copy¹ 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/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

¹ 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 the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

10 responses to “Lightbox + FancyTooltips Bug Fix”

Andrew 2007/08/27 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’).

Perishable 2007/08/28 8:29 am • Post Author

Thank you for sharing this tweak, Andrew! There are quite a few people using Slimbox these days, so I am sure that visitors will find the information helpful. Heck, if I had the time, I would dig into Slimbox myself..

By the way, the artwork in the Gallery section of your site is totally inspiring. May I ask what software was used to create/style the 3D objects? And also, do you offer any of them as desktop wallpaper? I would love to download..

Brett 2007/12/05 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

Perishable 2007/12/05 11:59 am • Post Author

I will look into it as soon as I can find the time.. I am currently in the process of switching servers, but will keep this on the list and report back here as soon as possible. Stay tuned..

Brett 2007/12/10 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

Perishable 2007/12/10 11:10 pm • Post Author

Brett,

I have been fighting a hellish battle myself lately, and may have missed your email due to a nightmarish round of server switching.. I suspect that several comments were lost, as well as a few emails (yours included). Please feel free to resend the email if necessary, and I will do my best to check it out.

Regards,
Jeff_

PLZTK 2008/10/18 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.

Jeff Starr 2008/10/19 2:38 pm • Post Author

Thanks, PLZTK! That is some choice workaround methodology you’ve concocted. The next time I am working with Lightbox, I will see if I can add to or improve the technique. In the meantime, it is good to have this information available online for others to reference. Thanks for taking the time to share it with us! :)

Max 2009/02/19 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.

Jeff Starr 2009/02/21 7:52 pm • Post Author

Will do, Max! ..Just as soon as I get a chance ;)

Comments are closed for this post. Something to add? Let me know.

Andrew 2007/08/27 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’).
Perishable 2007/08/28 8:29 am • Post Author

Thank you for sharing this tweak, Andrew! There are quite a few people using Slimbox these days, so I am sure that visitors will find the information helpful. Heck, if I had the time, I would dig into Slimbox myself..

By the way, the artwork in the Gallery section of your site is totally inspiring. May I ask what software was used to create/style the 3D objects? And also, do you offer any of them as desktop wallpaper? I would love to download..
Brett 2007/12/05 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
Perishable 2007/12/05 11:59 am • Post Author

I will look into it as soon as I can find the time.. I am currently in the process of switching servers, but will keep this on the list and report back here as soon as possible. Stay tuned..
Brett 2007/12/10 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
Perishable 2007/12/10 11:10 pm • Post Author

Brett,

I have been fighting a hellish battle myself lately, and may have missed your email due to a nightmarish round of server switching.. I suspect that several comments were lost, as well as a few emails (yours included). Please feel free to resend the email if necessary, and I will do my best to check it out.

Regards,
Jeff_
PLZTK 2008/10/18 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.
Jeff Starr 2008/10/19 2:38 pm • Post Author

Thanks, PLZTK! That is some choice workaround methodology you’ve concocted. The next time I am working with Lightbox, I will see if I can add to or improve the technique. In the meantime, it is good to have this information available online for others to reference. Thanks for taking the time to share it with us! :)
Max 2009/02/19 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.
Jeff Starr 2009/02/21 7:52 pm • Post Author

Will do, Max! ..Just as soon as I get a chance ;)