Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

Lightbox + FancyTooltips Bug Fix

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

Jeff Starr
About the Author Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Archives
10 responses
  1. 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’).

  2. Jeff Starr

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

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

  4. Jeff Starr

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

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

  6. Jeff Starr

    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_

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

  8. Jeff Starr

    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! :)

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

  10. Jeff Starr

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

[ Comments are closed for this post ]