A month or two ago I was implementing jQuery’s awesome FancyBox plugin, but the application I was working with demanded long captions. In some cases, the captions were exceptionally long. Unfortunately, the one thing that FancyBox doesn’t do well is long captions:
After a few changes to the stylesheet and some light enhancements to the code, I managed to get the effect I was looking for. The caption actually fades in and out on mouse-over, so it’s not as obtrusive as it looks in the screenshot:
Again, the caption fades in and out on mouse-over and mouse-out, respectively. The standard FancyBox previous and next links still work, as well as the close box. As you can see, there is now also an image counter for better usability.
The modifications weren’t very extensive, but I’ve found this to be so useful that I’ve decided to post it for future use. As far as integration goes, it works exactly the same as the original plugin.
Just wanted to shout out a big *thank you* for this! You saved me (and many others) hours of coding, testing and general messing around.
Oh this is great. Thank you!
Very close to being perfect, just one issue though, if the caption isn’t wide enough to take up a full line, the grey box doesn’t fill the width of the image.
Fixed it, well, bodged it. On line 309 of the css is the style ‘td#fancy_title_main’, if you add ‘width: 100%;’ to this it displays correctly. You do lose title_left and title_right, but it still looks fine.
This is a great complement!
Great article
Thank you for writing this article! It saved my Web site :)
Nice enhancement. I like fancy box but was never too keen on the captions.
One other little change I made to my version was to make the background overlay fade in smoothly, as it’s sudden appearance was a bit strong when the photos fade in nicely.
This is great! Thank you. Just wondering if anyone found workarounds for IE6/7 (old browsers now, I know, but I am still having to hack for them)
IE6 full screen overlay has no transparency, and then both IE6 & 7 caption overlay transparency makes them difficult to read – especially over darker images…
Hi guys,
I am new to fancy box. I was wondering how to use your modified fancy box for caption. I don’t know where and how to install this.
Please help me.
Thanks,
Jaekyun, check out the FancyBox documentation for this. It’s the same plugin with some style changes and some simple modifications.
Thanks, Cory. A mark for your small tweak — I implemented it with no problems! Love it!
I was wondering if it is possible to create a link from some of the caption text?
As far as I know, you can only use plain text in the title attribute for captions. You might want to contact the makers of FancyBox to suggest it as a feature.