Floatbox: A freeware lightbox clone

vastly superior to all the lightboxes I've tried, including greybox, lightbox, lytebox and a few others that sucked so much that they are not worth mentioning. Not only does it look sexy. but it works in IE6 (which is an amazing feat) Just getting CSS to render at all in that piece of crap is a monumental undertaking. Anyway, thanks again for this most excellent script!

Has anyone used this in a ruby on rails application? I am trying to use it but it is not working.

Hi George,
I know very little about Ruby on Rails so I can't speak directly to that. I believe RoR pushes a bunch of helper javascript to the client. But that should be ok. Floatbox is fairly well encapsulated and should play nice with other js. Of course I've got no control over whether other js plays nice or not. It could be stomping on floatbox in some manner.

The RoR environment could just be a red-herring too. There may be some other config problem. If you want to point me to a page where floatbox is configured but not running I could turn my highly-trained eyeball on it for a minute and see if I can spot a problem Maybe best to do that through email if you want to.

You stated the blinking cursor problem in Firefox was fixed. But I still don't see the cursor. My FF version is 2.0.0.12.
Another problem is when you select Back on right click menu in FF, it cannot take you back to the main page.
Thanks.

I did more tests on your iframe demo pages. Both problems happen only sometimes. But I always could reproduce them after some tries.

Hi Su,
Thanks for taking the time to tell me what you are seeing with floatbox. I do appreciate hearing how it is working out for other people.

I can't replicate the (non)blinking cursor problem. I too am using ff 2.0.0.12 and every form I load has the right cursor every time. If this is an occasional inconsistent problem for some clients and not others then it won't be something that will be fixable.

I'm not sure what you're getting at about the back button. The browser controls that behaviour, I don't. I always get expected results whether using the back button or right-clicking the overlay and selecting "back": it takes me to the previous page I was on before the current page that contains the floatbox items. Remember, when you are displaying something in floatbox you are not loading a new page, you are just augmenting the current page. Note that the url in the address bar does not change when you view an item. Back takes you to the previous page, as expected. If you just want to close floatbox, left-click the overlay (or click the close button (or press esc (or press x (or refresh the page)))).

Cheers...

Thanks a lot for replying my comments.
I'm actually using lytebox in a project but found some problems. And I found yours so I had a try.
Here is how I reproduce the non-blinking cursor problem on my computer:
1> Open a new Firefox window, go to http://randomous.com/tools/floatbox/ifdemo.php
2> Click on Contact Form demo, click on Subject text box, no problem, click anywhere outside the Contact Form (but inside the Firefox window to exit this demo)
3> Click on Contact Form demo again, and click on Subject text box again, I can't see the blinking cursor anymore.
4> Then even if I open to Google News demo, I can't see the blinking cursor there either.

I have problems with the positioning of the floatbox. If I scroll down and click a link at the bottom of a page the floatbox appears half out of the browser window. This happens in FF und IE on Windows XP.
Great script nevertheless but where can I edit the positioning? I just want to center it vertically.

Firstly, thank you for creating such an wonderful utility - I'm using it for the photo gallery in an upcoming project I'm building for my girlfriend (Belly Dancing WEB site). After trying JAS out and a couple of others, your Javascript stood head and shoulders over 'em!

I did run into a little snag using Opera v9.26 (Windows) though (and I assume it would exist in earlier versions that might interest you. It has to do with one of the the keyboard shortcuts for pausing/playing a slideshow - the Space key. Opera maps this (by default) to "One screen down" (whatever that really means)... however, the outcome is that the first image of the slideshow is displayed in a normal window (centered) without any styling. I tried to override this behavior but it seems that Opera intercepts this prior to the Javascript seeing the key. I remapped the pause/play to the "S" key (although this also has a side-effect - highlighting hyperlinks and header blocks in my *real* window) - no biggy but ascetically, slightly displeasing.

Finally, I know the controls for Floatbox are graphics but to keep my site's look 'n feel, I want to use text hyperlinks. I'll be pouring over the source this week but any hints wouldn't go astray.

PS. I'm also testing Floatbox against Safari v3.04 (Windows) and I haven't experienced any crashes at all.

I'm really glad to see floatbox getting some air time out there. I try to be thorough in my testing but there's bound to be new quirks showing up in other people's environments.

There's a new version out. It addresses most of what has been mentioned here. Please see the download page for change-log details. Anyone using floatbox is strongly encouraged to update their installations with this new version.

Blaise: Thanks for pointing out the Opera spacebar issue. That's about the stupidest browser design choice I have ever seen. If there is vertical scroll room on the page, Opera will scroll down on spacebar. If not, it will navigate to the page referenced in the last anchor on the current page!!! It's also the only browser that uses onkeypress instead of onkeydown. Anyway, this is fixed.

jay: Good catch on the vertical problem for iFrames. If I understand your problem correctly, it is fixed in this new version.

su: I replicated the non-blinking cursor, but after making the positioning changes for jay's issue, I couldn't replicate it again. Fixed by magic, I hope.

Cheers...

Thanks for the update... the spacebar is now behaving under Opera!

Hej,
took me some time to see this:
Had to add a "." in front of the path to js/css to get it to work!
Surprisingly on your demopage it seems to do just fine without this.

<script type="text/javascript" src="/floatbox/floatbox.js"></script>
into
<link rel="stylesheet" type="text/css" href="/floatbox/floatbox.css" />

<script type="text/javascript" src="./floatbox/floatbox.js"></script>

My main gripe about Lightbox, Lytebox and Floatbox is that you need to make it stay in the middle of the screen if a person scrolls the page. This is one of the main reasons I have returned to using Thickbox.

Carbonize,
The main problem I have with viewers that don't scroll the image is that - well - they don't scroll the image. The problem is if you have an image or iframe content bigger than the browser window you can't get to it. Having the browser content scroll when using the scroll bars I think is reasonably expected behaviour.

It's nearly always a bad idea to disable standard browser controls and cause your visitor's browser to behave in unexpected ways. Site visitors who don't want the screen content to scroll won't be tugging on their scrollbars. If someone _is_ tugging on their scrollbars it can only be because they are wanting to scroll the page. Why should we break their browser functionality and prevent them from doing so?

Thickbox is a pretty good option. It tacitly acknowledges the large content scroll problem by resizing all images down to fit the screen. (I prefer that to be a configurable option based on context.) Also on the downside, it messes up its display on IE6 if the host page is horizontally scrolled. There's still a lot of IE6 out there.

Cowles:
Starting a path with "./" means the path is relative to the current location. Starting it with "/" means it's relative to the root folder. You've obviously placed the floatbox folder immediately under the folder that contains the page you are including floatbox in. I recommend placing floatbox in its own folder off the root. The "/" syntax is correct for that placement. If you put the floatbox folder and files elsewhere, certainly you have to modify the paths as you did.

Cheers...

Hi
Love floatbox and the way it works, got a lovely slideshow working from a link which none of the other options I found allowed.

However I have a question regarding a multiple image gallery. Can you use rollovers for the thumbs, ie when you rollover the image a second one appears to show that you're over a link?
If it is possible can you give me an example of how it could be done.

Thanks in advance

Great work on this. I was using Lytebox previously and had to incorporate several hacks to get it to act how I wanted. Your recode does everything I needed hacks for before and more, and is a lot faster to boot. So thanks again for providing this.

I do have one question though. What is floatbox_ifload.html used for? It appears like it gets used for iFrames, which is what I primarily use floatbox for now, but renaming/removing the file doesn't break anything as far as I can tell. I was just curious as to its purpose because Lytebox didn't use an html file.

Thanks!

Wanted to let you know I got it to work. I was initially including the script using a rails method:
<%= javascript_include_tag '/floatbox/floatbox.js' %>
When I switched to just html it works fine,
<script type="text/javascript" src="/floatbox/floatbox.js"></script>

I haven't taken the time to see what rails was doing, was just glad I got it working.

floatbox_ifload.html...

...is a small page which simply displays the rotating animated gif that shows when content is being resized or loading. I put this page up in floatbox's window just before iframe content loads or changes. Otherwise some mildly unpretty things can happen during iframe content load/transition.

But now that you've asked the question, I took a closer look at the way it is used. It's not needed as its functionality can be replaced with just setting the transition source to "". floatbox_ifload.html won't be part of the next release.

Hello and thank you. I was asked to include a script somewhat similar to a site build and it along with a multitude of others could not do what I needed. Floatbox is working much, much better!
I do have a question. I have a link to a page out of a frameset and this page is the page with floatbox. I would like the slideshow to start automatically. I tried putting this on the link and it is not working. Am I doing this incorrectly?

Here is the link:

<A href="archstone2.html" rev="doSlideShow:true" STYLE="color:#C4C4C4;text-decoration:none"
onclick="NewWindow(this.href,'name','875','575','yes');return false;"><FONT
FACE="arial" size="1" color="#0000a0"><B>Additional Images - Under
Construction</B></FONT></A>

Any help is greatly appreciated.

Hi Christina,

You haven't got the link setup quite right. The first thing to note is that floatbox looks at the rel (not the rev) attribute to determine which links to activate. Options go on the rev (not the rel) attribute. So you need to add rel="slideshow" to the links you want included in the slideshow. Then, to autostart the slideshow, you would add rev="autoStart:true" to one of those links.

I'm also concerned because the link in your sample points to a .html file, not to an image. Those rel and rev attributes I described belong on links (<a> elements) that point to the images to be included in the slideshow.

Also.. the frameset may give you grief. I've tested floatbox extensively in pages of nested iframes, but have done no testing in frameset pages. It may not work, because a frameset page does not have a body tag and floatbox attaches itself to the body. If it does work in your frameset, please let me know. If it doesn't, you would have to redo your nested pages as iframes instead. (Maybe more work than you want.)

I hope this helps...

Hello. This is what I've come up with. You can see on www.oasisproductsinc.com. There is a nice display under fountains and then the Grand Lion. Yes, the frames made it a bit more difficult to figure out but we'd already built the site and time is tight. Thank you for your reply. I do love your script. Thank you for it's use.

I tried them all and I can't say enough how happy I am with floatbox! Annnnnnnd the new version released today is very great. It is now even working the impossible.... in FRAMESETS! Thanks to Byron that is. Thanks so much.

I'm getting some weird results with floatbox and I can't find where I went wrong. In FF, w/slideshow, prev/next panels are opaque yellow. In IE7, w.slideshow, pictures appear, but no overlay, no frame, no nav. I think I'm pointing wrong with directory refs, but they all look ok to me. I do keep all scripts in /scripts, css in /css, pages in /pages, etc.

The website involved is one I'm doing for a client at www.merlinschocolatelabradors.com. I'd sure appreciate it if you'd take a quick look. Just click on a puppy picture to start the show.

Like I said, weird. Otherwise, I really like floatbox and I hope to make it a standard feature in all my development work.

Thanks for all the work you've done with floatbox. I, for one, am very appreciative.

Hi Lee,

As my dear father would say, "when all else fails, read the instructions". In this case the instructions say:
"The easiest install is to simply copy the floatbox folder from the zip file into the root folder of your site so that the floatbox files and sub-folders reside under a /floatbox/ folder."

And then they go on to say:
"If you place the files in different folders than recommended here you will need to change the image paths in the css files and the include paths."

So either place the files in a "floatbox" folder at the root of your site, keeping the folder structure that's in the zip file, or if you change from that location, update your page header includes and the paths to the images in the css files to match your custom install locations.

I'm sure once you've done one of these two, floatbox will work fine for you.

Cheers...

You wrote: As my dear father would say, "when all else fails read the instructions".

And this I did, very thoroughly. I have reasons for wanting to keep ALL my files in the manner I am used to working with. I am not one for always taking the easiest course.

You: "If you place the files in different folders than recommended here you will need to change the image paths in the css files and the include paths."

And this I did, also. My question actually asked if there might be a path statement I might have missed.

I am not a newbie. I have been a programmer for 40+ years and a web weaver for about 10 years, though I am still learning new things.

You: So either place the files ..., or if you change from that location, update your page header includes and the paths ...

Actually, I have now tried both of these approaches and I'm getting IDENTICAL results. That, plus the fact that things work differently in FF and IE7, says to me that something else is going on here. I suspect a namespace problem, Floatbox colliding with some of my existing JS.

You: I'm sure once you've done one of these two floatbox will work fine for you.

Not yet, but I'll keep trying. I still do think you have an excellent product, and the problem has to do with other factors. I'll keep you posted on what I find.

Thanks for your input.

Lee

I've snuck a revision to v2.30 onto the download page today. I didn't want to generate yav (yet another version) so updated the one in place. It's got some minor tweaks and, against my better judgement but by popular demand, I've added optional support for fixed positioning (disable scroll bars).

Lee. Hope I didn't offend. I heard "I've installed in different folders and it's not working", so that's what I tried to address. I've never seen nor heard of the behaviour you are getting. There are no hard-coded paths in the js code, the namespace is well encapsulated as properties of the global "floatbox" object with a very small set of supporting global names and functions, and all class and id names begin with "fb". A name space conflict is unlikely. Is it possible you have the js files from one zip download and css files from another? Perhaps you should try grabbing the new build of 2.30 and replacing all the floatbox components. Please keep me posted. I'm interested in keeping floatbox as problem free as I can.

Cheers...

Byron - I can't find an area to remove the iframe border -- as I did with Litebox. Can you point out where I would modify the script?

(Nice coding, BTW)

You wrote: Lee. Hope I didn't offend. ...

Nah! I have never seen the need to become offended by another's efforts to help. Misunderstandings are always possible and getting upset just makes those more difficult to reconcile.

You: I've never seen nor heard of the behaviour you are getting. ...

Yep! It was an interesting combination of symptoms.

You: Please keep me posted. I'm interested in keeping floatbox as problem free as I can.

Well, I do have an answer for you and you are relieved of all responsibility for the problem.

In addition to insisting on my own directory structure, I had used an @import to bring floatbox.css into my own primary css. Within that styesheet, and below the point of import, I had a general series of default styles for anchors and the :focus/:hover specified "background-color: #ffcc00;", an orange-yellow, which explains the colored nav panels.

That took care of the FF problem, but the IE7 problem was still showing. On a hunch, I removed the @import and brought floatbox.css in with a regular <link> statement in the html.That was it! I had not heard that IE had any major issues with @import, but SitePoint's rather new CSS reference page at <http://reference.sitepoint.com/css/at-import>
states that IE's (up through 7) is somewhat buggy. I'll be more cautious with using it in the future.

As a result of pouring over many lines of JavaScript code not written by me, and some not written by you, I do have to make a general statement on your JS code: In the process of choosing Floatbox over Lightbox and Lytebox, I analyzed both applications rather thoroughly.

Lightbox: I dismissed this one rather early due to the need to also use the full Prototype library and two modules from Scriptaculous. That's a lot of overhead for a rather simple gallery. If they were already onboard for other effects, fine, but otherwise forget it.

Note on Prototype: Try turning on strict warnings when you're running Prototype sometime. There's no excuse for the sloppiness revealed here in a major library package that's been out for years. There were at east 20 instances of the assignment operator "=" being used where the comparison operator "==" should have been used. Like I said, sloppy workmanship.

Lytebox: The JS here seemed overly complex for what it was doing. Separate decision paths were used for each mode of operation (gallery, slideshow, iframe) for essentially the same functions of incrementing frames and deciding when to terminate. Also, I did have some issues in IE, but they were probably the same as what I ran into with Floatbox. I guess my overall impression of Lytebox was "inelegant".

Which is why I was delighted when I came across Floatbox, actually through a note you left on the Lytebox forum. I had started to try to cause the frame counts to wrap around to the opposite ends with both ightbox and Lytebox and found a very difficult job of reworking the code so I was very happy to find that this was the normal mode for Floatbox. All self-contained code with no dependencies, elegant code structures, and the best cross-browser results: what's not to like?

Thanks for a great product! I hope my notes might be of assistance in future bug-hunting. Please feel free to contact me if you still have questions. Sorry this is so wordy, but I couldn't stop.

Lee

Tinker:

I found it. And the answer is irritating.
IE is case-sensitive when reading the frameborder attribute. It wants "frameBorder" and will ignore it without the capital "B".

Solution: find "node.setAttribute('frameborder', '0')" in the code and upcase the B. I've patched the zip download with this change.

Cheers...

First, hearty kudos for your great modification of the Lightbox tool and for being available like this to help people implement it! I'm a newbie trying to incorporate Floatbox into my site I'm currently buildng. A couple questions-

1.) While it performs BEAUTIFULLY in Firefox, I haven't gotten it to work in IE-6. All of the demos on your website don't work in my IE-6 browser with the curious exception of your APOD Image demo which works great. When I click on an image, the image opens as a new page within the current browser. Do you have any suggestions as to what to look at in order to get Floatbox to work under IE-6??

2.) For my implementation, I want to show smaller sized versions of the photos. In the vast array of Lightbox options, I've never found a way to do this but using Floatbox, I seem to be able to do this by using the IFRAME option along with passing dimensions. The images I'm displaying in the Floatbox are 800x600 (portrait and landscape) and I'm want to show them at 400x600 to ensure they appear nice & tidy on the webpage. When the image loads in the Floatbox, a Zoom tool hourglass replaces the cursor within the Floatbox and clicking on the image does zoom into it. I'd like to disable that. Can this be done?

THANK YOU!

Hi Steve,
I can't begin to guess what the problem might be in your ie6 browser. I've tested floatbox a lot in ie6 from a few different machines, and I can't make it fail. I think the issue is local to you. If anyone else knows of ie6 failing to render floatbox content, please let me know. But I think this is a one-off.

Don't resort to iframes to size images. You can put "width:x height:y" directly in the rev attribute of the link to the image and it will take effect. Forcing width and height is not just for iframes. I don't think you get the magnifying glass doing it this way. Also, you can simply set the autoResize option to ensure that images always fit within the browser window dimensions without having to touch all the rev attributes.

Cheers...

Hey Byron - "frameBorder"! Finally! I kept piddling-around on that declaration, too, and case-sensitivity never once occurred to me. Thanks for the good catch.

I don't want to drag this off into a browser-war discussion, because I don't like any of them better than any other, but keep in mind that with all of it's flaws, IE dominates the market with more than 90% of all installed browsers being one form of IE or another.

It's been my experience that I spend just as much time adapting designs for Mozilla/FF quirks as I do adapting them for IE quirks. I think how much adaptation you have to do depends on what browser you use during development - I typically use Safari - and after I'm more-or-less happy, I have to start "fixing" it to make it look and work the way I intend it to work in FF, IE and Opera.

Just a thought.

Thanks again!

Tinker

Hi,

Love your work.
I just downloaded Floatbox and did som test on it.
Is it possible in any way to close the floatbox by clicking on a link og button ?
I tryed to do this :
onclick="self.parent.Floatbox.end(); return false;"
But with no luck.

/Martin

Martin:
Try onclick="fb.end(); return false;"

With "self.parent.fb.end()" it works like a charm, thanks for pointing me in the right direction.

And keep up the good work ;o)

/Martin

In IE6 I am seeing the overlay background cutoff in some spots. One is on the right side of the screen next to the scroll bar, and the other is at the vertical bottom.

Any ideas on how to solve this?

dhfmnx:
I noticed similar on a couple of my tests. I've added additional screen measurements to the stretchOverlay routine that tries to get the overlay right for IE6 (a hard thing to do). It solved it for my tests. Just now I put the change into the version 2.30 zip download. I'd appreciate it if you grab that update and let me know if it fixes it for you too.

Cheers...

Hi,

I don't know if it is a bug, but when i load a page in the floatbox/iframe and make an ajax call from that page, then FF does not close the conestion even though i make sure to close it when i make my ajax request.

When this happens FF keeps loading the page until the floatbox is closed.

Is there anything i can do to prevent this ?

/Martin

Martin,
I'm doubting this is particular to floatbox. There's nothing special going on with the floatbox'd iframe. It's just a standard iframe element with some styling and positioning applied. There's no event handlers attached to it, there's no code that pokes inside it. I'm afraid I have no helpful suggestions or experience with this. Perhaps you want to try your page from inside an iframe on an unadorned html page and see if the problem occurs from within other iframes?

Good luck...

Well, i just tryed what you sugested and when loading the same page in an iframe in a normal page everything works just fine.

So there must be somthing in the floatbox script that makes FF in a loading phase.

/Martin

New version out today. v2.35. Check out the download page for change-log details.

This version is most likely it, except for minor tweaks and bug fixes that might come up. It's rock solid and does exactly what I want it to now. But more importantly, I'm tiring of the project. It's time to move on to something else. Hmmm, maybe like playing outside in the springtime.

Cheers...

First off, great Floatbox!!! I was searching around on your site, and on google, but did you know of any bugs when trying to render in firefox v 2.0.0.14 . When I had first installed the script, it worked on firefox, but not ie7, then i switched a few things around, and now it does work in ie, but no more on ff.

The project im trying to load it into is within an iframe. so i do know that might be one of the problems.

here is what im working on.

www.m-onecorp.com
on the home page if you click on m1.corp projects, it will take you to 3 thumbnails, which each project has a set of 4 thumbnails that ive been trying to use the gallery on. Thanks for the help in advance.

Hi Mr. Zen

I don't know what to tell you. The floatbox stuff is loading fine from both ff2.0.0.14 and ie7 for me. I've tried it on both browsers from two different machines at different locations. Did you find and fix the problem since posting?

Cheers...

Hi Byron, I like the update (2.35) but I felt the need to make a change. Something broke in this version and I suspect that the major changes you made caused this to be overlooked. Essentially, if you have "string localisation" (i.e. "Image %1 of %2"), you may wish to preserve the case of the assigned string rather than force the string to lowercase. (Your script forces all strings from the "defaultOptions" array via a "toLowerCase()" call within the setOptions() function.)

As indexOf() is case sensitive, testing for "hint" will only pick up the hintXXXX localisation entries and not the "showHints" entry.)


Anyway, here's my change...

In the section:
"this.setOptions = function(pairs)", I deleted the line:

var v = value.toLowerCase();

and replaced it with the following code:

if (name.indexOf("imageCount") != -1 || name.indexOf("iframeCount") != -1) || name.indexOf("hint") != -1) {
var v = value;
} else {
var v = value.toLowerCase();
}

and now my case is preserved for localisation entries.

Good catch Blaise. Thanks.
Yeah, I was trying to be nice by lowercasing everything but overlooked the localization strings. I've put version 2.36 up which fixes this. But since I prefer "image x of y" to be all lowercase I set the initial default to that.

I also took the underlines off the 'P' and 'N' on the uppernav graphics since those letters are no longer used for keyboard nav. Don't want to be making any false promises.

No problem Byron... we can't be expected to be perfect can we?

One other thing that I wanted to implement was a counter display for my thumbnail container on the base HTML page. I managed to get it working today but I was wondering if you knew an easier way to go about it. Essentially, I did it by coding createElement() and createTextNode() methods in a new function within your JavaScript. I needed to access "this.arrImageHrefs.length" variable, hence the need to do this from your JavaScript file.

Anyway, here's the function I wrote:

this.addImageCount = function() {
var newPara = document.createElement("p");
var plural = (this.arrImageHrefs.length != 1)? "s" : "";
var counterText = document.createTextNode(this.arrImageHrefs.length + " item" + plural + " displayed");
newPara.appendChild(counterText);
var div = document.getElementById("gallery-counter");
div.appendChild(newPara);
};

Note: "gallery-counter" is the ID of the <DIV> element I have in my HTML file where I want the tally to be display.

I then added a call to fb.addImageCount() in the windows.onload() function immediately after initfb().

Any thoughts?

Well, Blaise, since you ask...
...I would do it differently.

First, you don't have to be inside floatbox to access stuff in the code there. Everything is exposed through the global fb var. Anything you can reference with "this." from inside the floatbox object you can reference with "fb." from outside. So the first thing would be to discard the function and just put the code inline inside the initfb() function and use "fb" instead of "this".

But we can do better than that. The setNode function can be used as a utility function to shorten things. You could say:

var newPara = fb.setNode("p", "someIDString", document.getElementById("gallery-counter"));
var plural = (fb.arrImageHrefs.length != 1)? "s" : "";
newPara.innerHTML = fb.arrImageHrefs.length + " item" + plural + " displayed";

This is good. Three lines of code and no embedded function. But I would want to ask why we are building the p element dynamically? This is just a static part of the parent page, so really it belongs in the page's html. So let's assume it's coded into the html with an id of "counterP". Now we don't need to create it, just update it.

var plural = (fb.arrImageHrefs.length != 1)? "s" : "";
document.getElementById("counterP").innerHTML = fb.arrImageHrefs.length + " item" + plural + " displayed";

Two lines - cool.
But lastly, I'd put a conditional around it so the code works fine on pages with and without the counterP element.

var counter = document.getElementById("counterP");
if (counter) {
var len = fb.arrImageHrefs.length;
counter.innerHTML = len + " item" + ((len == 1)? "" : "s") + " displayed";
}

Disclaimer: I haven't tested any of the above code snippets. But if they don't work, they're close to working.

Cheers...

Thanks for the reply... I prefer your way as it is less obtrusive and easier to maintain. I'll give it a try sometime today!

I was just wondering if there was a way to click on a link inside an already open floatbox and then have it resize to the newly opened page within the same floatbox.

Hi Steve,

Does anyone use floatbox to display a set of images, view them in order and then close floatbox? Anyone????

When I first thought about your question I concluded the answer is no. But on the ride home from work it occurred to me you could pump new info into the array that holds anchor information and then reload the current item. I put a demo of this up on on the demo page (of all places). Check out "update in place" under Stupid iFrame tricks. It should be reasonably self-explanatory but maybe next time it rains I'll add comments to the code.

Good luck...

Is there a possibility for <area href - image map. I can't find it.

Image Maps

They weren't supported.
They should be.
So now they are.

New version 2.38 posted with image map support added. Details are in the instructions and there's a sample on the demo page.

Hey! Good work. Thanks a bunch!
I'd love to give it a try but I would need an equivalent to "myLytebox.updateLyteboxItems();" as I need for Lytebox to run...or wouldn't I?

FF

I'm not sure what you are getting at. You don't need to call different functions to try out floatbox. Just install it as per the instructions and it will work. But in case you're doing something fancy, the equivalent floatbox function is fb.tagAnchors(). This is called automagically by the loader when a floatboxed page is loaded. I can't think of any scenario where you would need to call that explicitly. Send me a note through the contact form if you need more info.

Cheers...

Same problem as with Lytebox - IE cuts dark backgroud horisontally below flatbox bottom edge.

BTW Your demo page here shows things right.

Mocambo

I've never seen a case where the background overlay fails to fill the entire screen. A lot of work went in to making sure it does, even for troublesome IE. Can you provide a link where I can see the problem? If it is broken, I'd like to see if I can fix it.

Cheers...

I forgot mention that problems caused by IE6.

I have sent you link at Contact page.

I have the same problem with IE6: the overlay below flatbox bottom edge is not visible.

Re: IE6 Overlay

Thanks for the link Mocambo. I found where the conflict lies on your page. IE6 overlay doesn't like that it is inside an absolute positioned div. In the case of your page, removing 'position: absolute;' from '<div style="left: 6px; top: 8px; width: 800px; position: absolute;">' just after your body tag fixed it for me.

Wim: could it be the same for you? Is the content inside an absolute positioned element?

I'll work on floatbox tonight to see if there's something I can do to make IE6 happy in these circumstances. In the meantime, if you can live without the absolute positioning I think everything will work for you.

Thanks, if you can work it out and solve the problem for IE6.
I have the content and images in a div style absolute.
But my div style has to be absolute, otherwise my webstructure is misfailure.

The IE6 overlay problem is fixed. Since version 2.38 went up just yesterday I didn't spin a new version but just patched v2.38. Re-download it to get the fix.

Cheers...

Thanks !

Different position property is no problem.

I've found second little problem - how to avoid appearing scroll bars around flatbox image title description on smaller images and longer descriptions?

Seems, that there is enough space to fit descriptions also without there bars.

I've changed the css so that long words in narrow captions will truncate rather than display scrollbars. Words will only break on word boundaries, so it is necessary to make sure you don't have long caption words that exceed the available width when displaying narrow images.

I got floatbox working perfectly on my website (using cutenews with numorous messages and links on different pages), but when I put it in an iframe environment, I kept getting javascript errors and floatbox did not work for the last couple of links on my pages. Since I reduced the number of messages on my pages (and thus also the number of links), everything works just fine.
Has anyone had similar problems ? Has anyone got any ideas on how to solve this, so i can have more messages on one page ?

Good morning, Byron -

I'm having trouble with autoresize when changing the contents in the Floatbox.

First, when I open flotabox with HTML content (no pictures) and want to switch to different HTML content (also no pictures), setting the rev to the desired iframe size has no affect.

Second, when I open floatbox with HTML and a thumbnail picture, and click on the thumbnail to display only the picture, the Floatbox does not resize.

And in both, although I have set rev to scroll: auto, neither of these will show scrollbars.

What am I missing? Where di I go wrong, again?

Thanks,

Tinker

Hey Tink!

Without seeing the page in question I have to make a few guesses and assumptions here. Instead of trying to address your case directly I'll just throw out some relevant info that may be helpful.

autoResize. This option applies only to images and will resize the images to fit the visible display area if they are too big. iFrame (html) floatboxed content ignores this option and always shows the iframe at its specified dimensions (from the rev attribute).

If you are switching content within a floatboxed iframe using links from the existing content, you will not get a resize. The dimensions were set when you loaded the item and you have not reloaded a new item, just altered the current one. If you want to force a reload and a re-dimensioning of the current floatbox you have to do this with code from within the displayed html. There is an example of how to do this on my demo page. See "update in place" under Stupid Iframe Tricks there.

The option that controls iframe scrollbars is "scrolling", not "scroll". But the default is auto, so unless you are specifying "scrolling:no" you don't need it. Auto doesn't force scrollbars, only shows them if needed. If the content fits the iframe then scrollbars don't show. If your case is behaving differently than this I'd like to see it to try and figure out why.

Does this help?

Stupid iFrame Tricks looks like it does exactly what I'm after, Byron. Thank you.

I'll let you know if I figure it out.

You've been busy! I'm started fiddling around in version 3.2 just a few weeks ago and you're already at 3.29!

Best,

Tinker

It works!

And a final question: is it possible to set the iFrame dimensions in percentages? It's not critical, so this is just a question and not a request.

Thanks again,

Tinker

Yup, I've been pumping out versions too fast. A new one today, 2.40. (You're a little dyslexic on the version numbers Tinker.) Problem is, now that floatbox is getting some air time out there on planet earth, new quirks and unexpected ways of using it keep popping up. So I'm trying to keep a bug free and versatile package out there as best I can. The last major addition I have in mind is an info box - kind of a second floatbox over the first where you can show image descriptions, help screens for forms, exif info, etc. in an aesthetic manner. But I'm sure people will keep finding problems that need fixing and I'm sure I'll keep trying to fix them.

Speaking of which, it looks like we've got destroj's problem fixed. As always with reports of problems, the trouble lay in the floatbox code. The early loading routine was firing too early for IE in a child iframe. I've got a tighter routine now which tests out fine in both frames and flat documents.

Nope, no % width and height. The main problem is % of what? Floatbox is dislodged from the page and, well, floating over everything.

And speaking of percentages and floating over everything...
A group of physicists are suing to force a shutdown of the new CERN particle accelerator that is scheduled to be finished within the next year. By their calculations, there is a 1 to 10% chance that a black hole or dark quarks will be generated that have the ability to chain-react and entirely collapse Earth.
Enjoy your summer....

Hi, floatbox good work, but there are too many versioning. I prefear slower, but stable version with beta version to testing (for geeks :-D)

I have found a problemi with rel="iframe" and IE6 and white background: no border is displayed!

Good Luck!

Byron, I just updated to v2.40 and was trying to test the new 404 "not found" functionality you introduced in v2.39... unfortunately, to no avail. I still get the endless loading GIF (pretty, but not what's intended) rather than the 404 image.

Watching the HTML properties (using the "Firebug" add-on in Firefox), the fbItem is destroyed when floatbox encounters an image it cannot locate. Moving to the next image (that can be located), the fbItem is once again created. Looking deeper, the fbContentPanel is set to hidden when an image cannot be located which allows the loader animation to show.

I tried to set some break points within the loader.onerror function but couldn't get it to even hiccup. Finally (if you think it may be something as simple as the path to the image file), I have tried placing the "404.jpg" file in several locations (and updated the "url404Image" string correctly) without any luck.

Thoughts?

As Hawk in Winter said :floatbox is vastly superior to all the lightboxes ... I've also tried, including greybox, lightbox, lytebox and a few others that sucked so much that they are not worth mentioning. Not only does it look sexy. but it works in IE7 (which is an amazing feat) Just getting CSS to render at all in that piece of crap is a monumental undertaking.
On top of that it's amazing how byron manages to adapt floatbox so quickly to all kind of new situations (even if this means a new version every week ...)
Also on my behalf : thanks for this most excellent script!

Actually, I am a neophyte regarding programming, and so my questions may be somewhat silly - can a PDF and/or a SWF file be displayed using your Floatbox program (which is astounding to me), and if so, how can this be done?
Thanks for your comments.

Hi,
Just tested the many lightbox spinoffs and like floatbox the most.
There's one question i'd like to ask.
Can someone provide me with an example script on using it with a flashnavigation?
Mainly the iframe option for multiple pages.
(I know this must be possible as it is working in lytebox but only on pictures,that's why i ask for multiple pages)

Thanks in advance Hans

Hi Donald,

I haven't done a pdf but certainly floatbox can handle multimedia such as swf files. You can see an example of this on this site's floatbox demo pages. Look for "iFrame flash test". You can see the source for the iframed flash page there too. The swf page is loaded into floatbox as an iframe. The instructions page (either online or in the zip package) should give you enough info for how to hook that up. Read the instructions, but pay particular attention to the "Notes on iFrame content" section. Good luck.

Hans...
Sorry, I can't help because I don't understand what you are looking for or trying to do. Can anyone else step in here?

It's starting to look like I should replace this comments page with a proper discussion forum. Maybe...

Hi,
Suggestion for a forum http://www.ning.com/
Here's the thing for a lytebox function to work with flash navigation.
http://www.dolem.com/forum/showthread.php?tid=311
Maybe someone can convert this to a function for floatbox.

Hans

Hi Hans,
Ok, I think I get it now. You have flash navigation on the base page and when you click something in that you want something to open in floatbox.

I don't know anything about programming flash, but I think the following strategy would work best and is a lot cleaner than the lytebox forum solution. (I think this would work well with lytebox too. Note: the lytebox strategy can't work in floatbox.)

Put a <a> element on your page properly setup for floatbox (rel attribute, etc). Give it an id. It doesn't need any displayable content - an empty <a ...></a> element will do. Then set an action on the flash nav thingy that fetches the <a> element by id and runs its onclick function. In javascript this would be:
document.getElementById("myId").onclick();
That's it. You're done. Basically, just simulate a click on a standard floatboxed element. Alternatively, running the js code fb.start(document.getElementById("myId")) should work too. I haven't tried either of these, but I don't see why they wouldn't work.

Cheers...

hi,
i have problems with non-english characters in image filenames, only in ie6, even if i print out with rawurlencode().
ff and ie7 is ok, but ie6 gives decoded filenames to floatbox so floatbox cant find the file.
idea?
renaming files is plan b only.

second, when an image is small enough the caption hides.

thanks
adam

anyway, great job, love it.

Greeting,

I've spent months to search for a lightbox.
I've seen and tried a lot of different type of lightbox scripts.
And also have been disoppointed alot of times until I found this floatbox script from this site.

Big thanks to Randomous. You've done such a great...great... job. This is exactly what I'm looking for. Very easy to use, yet very powerful.

Best wishes,
Alan,

Hi Adam,
I'm not sure I can be much help on the international characters. Floatbox just uses the hrefs as presented and if the browser can't make sense of them, there's not much I can do about it. I wonder if it would help by making sure you are specifying a character set that supports those non-English characters. You should either be sending a header of "Content-Type: text/html; charset=utf-8" or including the equivalent meta tag in your doc's <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

And yes, if there's not enough room floatbox will not display the caption. For small images you can make more room for the caption by turning off lower navigation (navType=upper or navType=none) and/or by dropping the close button (showClose=false).

Cheers...

yes, i send the header with the correct utf-8 encoding. it's very interesting, a file named this:
a 3 grácia.JPG
in the page source is:
a%203%20gr%E1cia.JPG
when i open it in ie6 with floatbox it gives 404 with:
a%203%20grácia.JPG
when i open it in ie6 normally the filename in addressbar is:
a%203%20gr%E1cia.JPG

so without fb everything works, but with fb only the space is encoded.
is it possible to re-urlencode in floatbox?

Adam:
I spent a little time looking at this.
An href of "a%203%20gr%E1cia.JPG" would not load for me anywhere (FF3, IE6, IE7 with or without floatbox).
An href of "a 3 gr&#225;cia.JPG" loaded in all browsers with and without floatbox.
"a 3 gr&#xE1;cia.JPG" also worked everywhere, as did "a%203%20gr&#225;cia.JPG".

Conclusion. You have to use the &#...; notation in the html to reference characters above 127. This is a browser/html requirement, not a floatbox requirement.

i tried to use htmlentities() instead of (and with) rawurlencode() but nothing helps. the browsers decode the entities.
you can see the page at:
http://www.monyo.hu/kepek.php?id=27
both ff and ie6 displays pics when you open in new window, only fb cant find some of them.

i think plan b is near..

Hi,
thanks for the great work.
But :-)

I try to get some phpbb3 forums in a Iframe.
Resizing works great for other sites. (google for example) but not for the phpbb3 templates I want to show.

I use this link:
<a href="http://google.nl" rel="iframeFoo" title="google" rev="width:500px; height:600px;" >google</a>

also tried to modify autoresize true/false.
Any idea how I can force the correct size?

Sander,
There's always a but... ;-)

Ok, so that's the google link that works. What does the one that doesn't work look like?

Adam

This would probably have been better as an email exchange, but what the hell, I'll add more on to it here.

The short answer is Plan B.

The medium answer is IE6 javascript has at least one bug that prevents it from working with extended characters.

The long answer is a little bit strange. Extended character behaviour changes depending on the server the content is served from. When my test page is served from my local apache server on my windows machine, you get the behaviour I described earlier - all browsers with or without floatbox work with &#225; encoding. No other encoding works. However, for the same test page on my linux hosted apache server, none of the &#225; encoding works anywhere. The only encoding that works is the one you are providing that uses %E1. How very odd.

But yes, the %E1 encoding works as a link in IE6 but won't load in floatbox. There's nothing I can do about this. The IE6 js bug is that it keeps the encoding in place for characters less than 128, but removes the encoding for characters above 127. It does this in all internal string contexts. And once the javascript engine decodes those upper characters, they become useless as image src values.

You can see this behaviour at http://test.randomous.com/gracia.html. Notice the filenames displayed as captions in the different browsers - especially the IE6 caption. I tried different re-encodes but with no luck in IE6. There's other IE6 bugs with its escape() and encodeURI() functions on extended chars, but this post is already too long to get into that here.

So plan b it is. One day IE6 will be gone...

hi,

<a href="http://gratis.forum-xl.nl/index.php?style=2" rel="iframeFoo" title="phpbb3 template" rev="caption:`size` width:500px; height:400px;">

(also without the caption it is not working.)

The link is on http://phpbb3styles.nl/index.php
Left top.

thanks for your reply.

hi,
thank you for your time.
i always learn something new (like in south park ;), for this time is never use intl chars in filenames. i wrote a script to rename existing files and db entries, so now everything works fine.
thank you for your help, i hope it was useful for others too.
plan b rulez
adam

New version 2.42 posted which addresses sander's issue which was multiple floatboxed items with identical hrefs.

Hi! Thanks for the cool lytebox mod. It's great to see Floatbox picking up where lytebox "left off" (it's been +6 since an official update).

I've installed Floatbox and have it working on my site, maybe because of the enhanced iframe support. Couple of questions that I couldn't seem to answer (despite the docs and tinkering)

a) If I have a 1st child iframe with links to 2nd level children, all the 2nd level children have the same caption / title as the 1st child head info (me.title = '2nd level children title';). Is there a way to override this so that each 2nd level child can have it's own caption/title? I've tried removing this line, and explicitly specifying the title (using title="" on the a href) but nothing I do seems to get 2nd level children to have their own titles.

b) Can I disable keyboard nav per iframe child? I've tried adding enableKeyboardNav: no; to rev, but to no avail. I have some multimedia content in an iframe that I would like to reserve the esc key for but nothing I've tried prevents Floatbox from closing the iframe on esc.

Thanks for this cool lightbox. Keep up the great work!

Hi Casemon,

When you say a 2nd level child, do you mean new content in a floatboxed iframe that you have navigated to from a link in the previous floatboxed iframe content? I'll assume that's what we're talking about here. If you're doing what I think you're doing, check out my demo page and in particular hit the "view source" link beside "Update in place" under Stupid iFrame Tricks. You will need a similar, nearly identical, onclick action and associated function for your links.

disabling/enabling keyboard nav. I don't know about this, I've never tested it, and I'm too lazy to do so now, but try, from within a floatboxed iframe...
disable keynav ==> "parent.fb.doc.onkeydown = null;"
enable keynav ==> "parent.fb.doc.onkeydown = parent.fb.keyboardAction();"
Your mileage may vary.

If this is the sort of stuff you're doing with floatbox, you're going to love the next version I'm working on. It's very strong on managing links and content within the floatbox and makes your two above challenges just work without code insertions into your content. It will be a week or two before I have a beta of that up.

Cheers...

first of all i'd like to thank you for re-coding this so nicely and making it very user and browser friendly, i've spent many hours looking for a compatible lightbox clone for my needs and this is by far the closest.

i'm about to implement this on my site and there are a few very minor issues that i've noticed but i can live with and i have corrected for them via broswer detection.

using firefox 2 on mac, if you overlay flash or quicktime with floatbox, while hiding the embed/object, the embed/object stays hidden unless you click on where it should be.

there is a browser plugin called devalvr (http://devalvr.com) that although it may seem obscure, many of my users use it and it's been downloaded over 1 million times. loading floatbox and this plugin at the same time using "autoStart:true" causes the plugin loading to fail (or maybe it's hidden?) in opera, firefox2 and firefox3 on windows.

additionally, safari for windows (i know only 4 people use it) floatbox fails to hide the devalvr object/embed and launches behind it.

i think the only one that may be of concern is the firefox2 mac one, and the other's are very minor. the devalvr overlay issue is problematic with all of the lightbox clones i've tried and i've contacted the developer about it, but i'm not sure what he will do about it.

cheers and thanks again

sorry i should have included a link. this is my development area on my home machine, so it is a bit slow. this is the smallest movie i have. there should be a floatbox that comes up on initial load and then to view an onclick floatbox, there is a link 'view map' on the top right.

http://pdxvr.hopto.org/vr-6-17

Michael,
I don't have easy access to a mac. Although I'm not hopeful about the ff2 flash hiding issue, could you please try a code change for me? I want to see if focusing the unhidden objects/embeds brings them to life by calling .focus() on each of them.

In the setVisibility function can you please find:
while (i--) els[i].style.visibility = state;
and replace with:
while (i--) {
  els[i].style.visibility = state;
  if (!state) els[i].focus();
}

With a little luck, that poke might wake them up.

that fixed it.

awesome !!

i've quickly tested in ff3, ff2, camino, icab, omniweb, and opera on mac and that of course didn't break anything, but i thought i'd check for you since you don't have a mac

any ideas stewing about devalvr ?

-mmm

What good luck.
I wish they were all that easy.

I haven't got any ideas on the devalvr challenges. I'll need to replicate the problem. When you say it fails to load/start, is this content inside a floatboxed iframe or is it on the underlying host page?

Thanks for your help with object unhiding.

deval vr is an object layer too. it's on the underlying host page and it only interferes when the object and floatbox load simultaneously. i was getting a js error at one point, but i can't reproduce it now which is strange.

the js that writes the objects has identical code but for the different plugins (i.e. the html tags are all formed the same) so it's probably an issue with the plugin and as i've said, i'm not sure that the author is interested in fixing this.

what is happening now is:
ff3 is loading the object and it's not loading the floatbox
ff2 is loading the floatbox and not the object
opera is loading floatbox and not the object

i'm guessing that putting a delay on either one loading would probably fix it, but i don't know how to do that, but i'm going to look now to see if i can find it.

thanks again though

-mmm

it gives me this error
this.fbCaption is undefined

from this line.
this.fbCaption.style.display = this.fbItemNumber.style.display = 'none';

i really have no idea what this is though

With your help, I was able to resolve those 2 issues. Huge thanks!

One thing I'd absolutely love to see (and is missing from other lightbox-viewers) is some intuitive localization support.

To be able to pass a language variable in rel="" and have all the floatbox images & strings appear localized to that language would be like a dream (a good dream!)

Thinking if Floatbox included basic support for the main 5 languages (English, French, German, Italian, Spanish) to start, users could "roll their own" for other languages following your example (i can help with the starting translations...)

Thanks again for this cool mod!

Hi again! In considering new uses for Floatbox, I have an iframe that when used with Floatbox just drives Firefox 2.0 (osx) insane with flashing and errant overlays everytime. If I load it with Floatbox, I have to literally restart Firefox because the maligned behavior seems to carry over on all other Floatbox iframes (on all pages that use it) from that point on.

The code itself is sound when loaded outside of Floatbox, so I wanted to ask you: is there is any known reason why this would occur?

The iframe itself contains object code to load data via a plugin. It first checks if the plugin is loaded (if not, it offers a means to download the plugin) and waits for the plugin to be installed, then automagically refreshes with the data once the plugin is found.

Does this ring any compatibility bells? Seems to work fine even with Floatbox on Safari, Firefox 3.0b, and IE6 (haven't tested against IE7 yet).

Casemon,
Sorry, I have no ideas on how to make your situation settle down. The combination is scrambling firefox's rendering engine and I can think of no way to mitigate the ill behaviour other than to keep the 3 miscreants separated.

Semi related, ff3rc1 is causing me some concern. Overlay fades above images are uneven with the opacity varying between the image areas and the others. And iframes on the host page under a floatboxed image bleed through while the image is rendering making for flashing and general ugliness. I suppose I should put up a demo page and report these rendering bugs to those hard-working souls who are building our favourite browser.

Perhaps I am off topic.

Hi there, first, let me say FABULOUS JOB!! I love the Floatbox.

I've discovered a small bug with IE6 (unfortunately, I have to still code for this POS browser as that is what we use at work).

In IE6, when initiating Floatbox (doesn't matter if it is an image or iFrame) the overlay animation will start from the top, fill in about 10px and then stop. Then the image or iFrame does its animation, and once it finishes loading, the rest of the overlay simply appears without fading in.

This only happens the first time Floatbox is run - after that, it works perfectly... shift-refresh the page and it happens again.

You can see this behavior on your demo page (if you have IE6 to test with).

Hopefully it is a small thing that can be fixed?

Thanks much!!

Allan

Hi Allan

Yup, I've got IE6 in a virtual machine for testing. It tests fine for me. The overlay always fills the screen and this includes during initial load and fade-in. I wonder what the difference is? I'm on XP sp2. Could this be a service pack 3 issue? (I had to re-install my system back to sp2 when sp3 broke tons of stuff for me.) Any other light you could shed on your context might be helpful. I can't fix it if I can't re-create it.

Cheers...

Interesting - I am on SP2 as well. I am at work right now so this wknd I will test it on my IE6 install at home to see if I can recreate the same problem... my version of IE is 6.0.2900.2180. I will let you know the outcome.

Thanks a lot and again, awesome work!

Allan

Sorry Allan, mia culpa.
It does that for me too off my live site, but not off my local site where I was testing. I have to pump out a new version this weekend to accommodate some screen measurement changes Opera made with their new v9.5 browser. I'm confident I'll be able to have a fix for this in there too.

Ah, cool, now I know I wasn't hallucinating ;-)

Thanks for the great code and awesome support - by far the best *box out there!

Allan

New Version

Opera has made it necessary to release a new version of floatbox. Prior to Opera 9.5, they returned the browser window size in document.body.clientHeight (with a bug if there were borders). In their wisdom, version 9.5 changes this to return the body height, and moves the display measurement to document.documentElement.clientHeight. Existing code that measured the screen correctly for earlier version of Opera has been broken with the new release.

Unfortunately, everyone should update floatbox to the new version 2.43, otherwise your Opera visitors will wind up with floatbox content positioned half off the screen.

This version also fixes the ie6 initial overlay size problem reported by Allan.

IE6 problem gone, working flawlessly across the board! A million thanks for the amazing work and fantastic support!

Quick question - is it possible to compress the JS using some of the JS compression tools out there? Obviously this would be done after all the settings were adjusted.

Thanks again,

Allan

I've had good luck compressing with http://javascriptcompressor.com/

It worked well for me leaving the options block uncompressed and just doing the rest of it. You'll want to test the bejabers out of it before deploying.

To comply with license terms, the attribution comment block at the top of the js file needs to be in place on the compressed file as well.

Good luck...

i've had good luck with dean edward's packer and yui compressor, i'll have to redo mine again though to comply with the license

i didn't notice any opera 9.5 issues with my implementation, but i'll check again.

did you add that focus bit for firefox 2 on mac ?


In the setVisibility function can you please find:
while (i--) els[i].style.visibility = state;
and replace with:
while (i--) {
els[i].style.visibility = state;
if (!state) els[i].focus();
}


thanks again. great script

well i couldn't wait for an answer so i downloaded it and i see you did :)

Hi Byron, thanks so much for the script. I'm writing about a possible bug in 2.43. Here's a test case: http://nvolt.com/fb_test/main.html

In Firefox 3.0 (possibly earlier), clicking 'next' or 'prev' onto an iframe Floatbox with a caption that spans more than one line, and with height:max, the loading animation comes up and just stays there.

This does NOT happen with:
- image FBs (as shown)
- IE 7.0.6001.18000 (the other browser I tested with)
- when you directly click on the link for the iframe with the long caption, rather than navigating to it through an existing FB
- when the height option is set to anything else.

The site I'm working on needs multi-line captions and height:max boxes, so for now I'm just commenting out the CSS for the loader image. By the by, and option to turn it off might be useful.

Thanks again!

Silverquick

Thanks so much for such a clear description and working example. It makes it easy to fix.

What's happening is that multiple resizes occur because the larger caption pushes the resized item past the bottom of the screen. By mistake, the second resize also lights up the loader gif. One of the gif displays is cancelled, but not the other. Here's how you can fix it until the next version.

At line 569 find:

} else {
this.objTimeouts.loader = setTimeout(function() { fb.fbLoader.style.display = ''; }, 120);
}

Add the required conditional by changing this to:

} else if (!this.resizeCounter) {
this.objTimeouts.loader = setTimeout(function() { fb.fbLoader.style.display = ''; }, 120);
}

Cheers...

Hi Byron, I've been experiencing quite a wierd promblem with my Floatbox implementation...

Essentially, I have two XHTML 1.0 stict sites that use Floatbox. The first works fine with all versions up to and including v2.43 (not live yet) BUT the second; (http://www.sheba-bellydance.com/gallery.html) displays unusual positioning with the lower navigation controls when using v2.42 & v2.43. Mainly, the "off" images are offset to the right and visible at all times. I have worked around it by using a slightly modified CSS file based on v2.41 (in part, I've widening the gaps between the lower controls) but this is only a stop-gap.

Further, I have checked the site for any annomolies such as a non-terminated <div> or such that may cause such behaviour to no avail. It checks (without errors or warnings) against the W3C validation tool for the XHTML and CSS files. In addition, I have tried using a completely unmodified Floatbox CSS file from the ZIP (v2.42 & v2.43) and get the same result.

Any clues?

Hi Blaise,

The problem has to lie in customizations you have done. The css files for 2.41, 2.42 and 2.43 are identical. The last css change was from version 2.40 to 2.41 to support the new 'enableWrap' option. I notice you are using custom graphics (which look really good, by the way). I can see the changes to the control element dimensions you have made in the css, and they look correct. But this is the working version I'm looking at. I suspect in the broken version, you overlooked or mistyped one of the size adjustments in your modified css. If you can post a link to a broken instance, I'd love to take a look and make sure I'm not doing something wrong somewhere.

Cheers...

Yet another version. I'm just trying to keep the bugs away. No hate mail please. See the download page for change-log details.

Thanks for the reply Byron, I'll look into your suggestions.

From the 2.44 change log:
"The focus is now removed from the clicked anchor thereby preventing that anchor from having an outline when floatbox exits. Particularly important for Opera 9.5 which leaves a very strong blue box around active anchors."

Just a heads-up that this works as designed when clicking on the "close" button or clicking outside the floatbox frame. Unfortunately, it doesn't work under FF3 when you use the keyboard shortcut "ESC" (sorry, haven't check FF2).

Hi, I am using XSLT to create a gallery page. This XSLT is loaded inside an iFrame. The problem is on IE7 that when I click on an image, floatbox loads under this iframe, it will not overlay it.
Here is an example:
http://www.atlanticmoon.com/arimpianti/en/profile.html
click on Realizations (use IE7)

Horia,
You're using lytebox, not floatbox. Switch over to floatbox on that page and I'm sure the problem will go away.

Blaise,
Thanks for drawing my attention to that. I won't worry too much about the focused link outline in firefox because it's not ugly. But it will be gone in the next release. The real target was the heavy blue outlines Opera can put on focused links as an accessibility aid.

Hi Byron, I was just wondering if it would be possible to add the capability to display DIVs inside the Floatbox (in addition to iFrames and images)? Thickbox is the only *box that provides this capability that I know of but it pales in comparison to Floatbox.

Thanks,

Allan

Hi Allan,

I'm currently putting the finishing touches on a new major version of floatbox which does support direct loading of inline divs. It also supports direct loading of flash, youtube, google video and yahoo video. There's a bunch of other cool capabilities included as well. I'm trying to internationalize this version and not leave it so English-centric. This involves rounding up string translations and re-doing the graphics, all of which is taking time. I think it will be another 2 to 4 weeks before it's ready for release.

Cheers...

Your support for Floatbox is simply unbelievable!! A million karma points to you!!

Allan

Yes, agreed, Support on this project is as awesome as the project is itself! Great work Byron!

I've updated to Floatbox v2.44 and all seems well, save for the issue about Firefox I commented on a few weeks back (below) also mentioned in the 2.44 release notes. If you want to test it out, visit this site using Firefox 2 or 3:

http://www.bydesigngames.com/mbb

And click Online Demo for the Floatbox popup (may need to install the plugin). With the plugin installed, you'll see that Floatbox get really strange (but only in Firefox!).

Overall, Firefox 3 with v2.44 "feels" slightly better on this issue, however Firefox 2 support seems right out! Crashing the browser and such on any embedded content (try closing the above demo or video Floatbox popup using Firefox 2 on OSX)

Another issue a user with slow-download speed reported is that the delay for a gallery preview didn't seem to take into account the time the image needs to load, so that every time they finally saw a new image (the gallery timeout having passed due to slow speed), it was immediately changed to loading the next image. Not sure if this still happens with 2.44.

Page also uses Floatbox for iframes, images and flash player so take a look around if you want to see it all in action!

Actually I've restored v2.42 because of the Firefox 2 bugs inherit to v2.44

You can still see the Firefox weirdness with the Online Demo link (below) tho (just not the video link).

Bugs! I hate bugs!
Casemon, please correct me if I'm wrong, but I don't think we are talking about floatbox bugs here. I think you are referring to the confirmed incompatibility between your plugin and floatbox. If there's more going on here than that, let me know.

By the way, I loaded your plugin on my work PC and confirmed that firefox2 would crash on floatbox exit when the plugin was active. So I loaded firebug to take a closer look. After firebug was installed I couldn't get firefox to crash anymore! I didn't install your plugin on my home machine that has firefox3 because, frankly, I don't trust that plugin.

Also, while I usually find problem reports from the field to be very reliable and extremely helpful in making floatbox better, I am doubting the second-hand report of slideshow images advancing to the next one before a slow load has completed. I doubt this is possible. The timer to move on to the next slideshow image is set after the current image is fully loaded, resized and displayed. The timer set is the last thing that happens before the floatbox code goes idle and the countdown to the next image does not and can not begin before the current image is completely loaded and rendered. This second-hand report just does not seem credible.

Let's be clear so as not to cause undo concern to floatbox users. The phrase "bugs inherit to v2.44" is mis-spoken. While there is the mentioned compatibility problem with your unique plugin, there are no currently known bugs. But of course as soon as new ones are discovered I'll do my best to stamp them out.

Cheers...

Hi Byron,

re: the plugin
I know it might seem to complicate, but the plugin itself is just fine, it's one of the most secure and plugins around (the developers are awesome like that). I think the issue in Firefox has to do with how divs are handled in the iframe, and that the page with the plugin content does some iframe mojo to always detect if it's installed, which in Firefox with floatbox just makes things go bananas. I'm not an expert on these things, so I can only provide what I see; Firefox + Floatbox + this iframe content (regardless of plugin) = weirdness.

re: second-hand report not being credible
I think you're right about this. I didn't mean to suggest it was programmed any other way, only was relaying what feedback I had from a dial-up user.

re: bugs inherit to v2.44
Again, I do not mean to suggest anything about Floatbox quality, I think it's awesome, I recommend it to others, and continue use it for my site. Only reporting what I found: latest Firefox 2 crashes with Floatbox v2.44 with my iframe content, whereas v2.42 does not (though does display things in a very weird way, like it's drawing divs everywhere. I think it is connected to the iframe content behavior, but again, it only happens in Firefox 2 + Floatbox, so I don't know what to do about it other than report back here.

Hope this clarifies my position. LONG LIVE FLOATBOX!

Hey Casemon...
Firefox2 has a bug where iframe form fields won't display a cursor unless the iframe is contained in a fixed positon div. Maybe it is fixed positioning that drives the plugin nuts??? Try rem'ing out the following line in floatbox.js and see what happens.
if (this.ffOld) this.disableScroll = true;
...or in older versions...
if (this.ff2) this.disableScroll = true;

Hmm... it sounds like we may be on to it... though I think the same would happen with this same iframe code + any embedded object (not just this plugin, but say flash plugin too).

I tried as you suggested, but still saw the same wonkiness in Firefox 2.

If it helps, in Firefox 3... the only issue that I can see is that the content is covered up by something (a div?) in a very specific & consistent way. To explain:

If you were to take the iframe size and quarter it (draw a vertical & horizontal line through the middle) the upper quarters and the lower left quarter are covering the content (appear blank white)... only the lower right quarter of the content is shown; this happens only until the content is fully loaded (after which it seems ok, even though some of the remains of the previous wonkiness remains (and from then on similarly messes up any floatbox links until the browser is restarted)

Again I believe the issue is due to the specific iframe code + some embedded content + floatbox somehow... just no idea what exactly!

Thanks for your help in tracking this down, I don't know what else it could be.

Casemon (and everyone else),

There's more going on than just incompatibility with the Unity plugin. I've reproduced crashing of firefox2 with flash and quicktime content too. This occurs on closing floatbox with that content in it. Needless to say, I'm on the case...

I owe Caseman an apology for not believing the Firefox crash problem was more extensive than just the Unity plugin. Case, thanks for your persistence in keeping me fully informed.

Definitely a weird Firefox 2 browser bug. I've found a workaround and posted a new floatbox version 2.45 which seems to avoid the firefox crash when exiting from iframe content that has an object element in it. This is a serious bug, and anyone displaying multi-media with floatbox is strongly encouraged to move to this latest version.

Cheers...

Hi excellent Byron and many thx for the best lightBox like I've ever tested.

Well this said, I've a little bug (ouch i read u hates bugs...) :

I have a FAVideo embed in my home page and i want to lunch a larger view in a floatbox using the Jeroen Wijering mediaplayer.
(Yes i know you'll find this stupid but i have my reasons)

Well till here no pb but, for this i have to STOP the FAVideo animation before otherwise it still running in back ground.

FAVideo accept javascript commands so i wrote this :

<script type="text/javascript">
playerOne = new FAVideo("video", "video.flv",300,260,{
allparams:"..." });

function stopVideo(p_player) {
p_player.stop();
isPlaying = false;
updatePlayButton();
}
</script>

And in the link :

<a href="video.html" rel="iframe" rev="width:770 height:580" onclick="javascript:stopVideo(playerOne)" >

This worked well with the Shadowbox lightbox but i don't want to use this lightbox anymore, i want yours !

Do you have an idea why it doesn't work ?

Many Thx in advance for your answers.

Hi Sof,

I'm glad your liking the floatbox. Yeah, I know why it's not working for you. Floatbox takes over the onclick function of its links, so your onclick function never gets a chance to run. It is discarded/overwritten by the floatbox action. Does setting hideFlash to true not hide the favVideo on your home page when floatbox runs?

Hi byron and thx.
yes it is. The flash anim disappear but i hear it on background. It still running.

So in other words, you mean we can't use any javascript action in the href link at all ?

humm okay well i dare i have to do differently... but how ?

Sof,
I don't know if this is the best way, but I think you can make it work with two links.

<a id="video" href="video.html" rel="iframe" rev="width:770 height:580"></a>

<a href="" onclick="stopVideo(playerOne);getElementById('video').onclick();return false;"> stuff to click on here </a>

Things to note: the first link doesn't show any content on the screen, but is the one floatbox will use (because of the rel attribute). It has an id so the second link can find it. The second link shows your clickable content, but it is not a floatboxed link so its onclick function is not touched.

Does this make sense?

Great stuff! I spent hours looking for a good Lightbox clone and they all more or less sucked for my purposes. I wanted clean presentation with little animation, and good config options, and there were maybe two or three that seemed usable - tried Floatbox and that was it. Extremely good documentation helped a lot, and I love all the possible choices I can make with the config.

I did have a small bug with a fresh install of 2.45: the Prev|Next buttons displayed more than one image (fixed this by emptying fbLowerNext and fbLowerPrev backgrounds), and they were also positioned slightly on top of the Close button (which I fixed with #fbLoverNav {position: relative; right: 50px;}). Happened on custom and black themes and also on both the small and big css files. Both were super easy to fix, though, thanks to the good readability and structure of the files.

My three wishlist items:

- When clicking Next for the next image (or prev), instead of "snapping" the image to the next one (related to imageFadeDuration I think), it would be slightly nicer to my eyes if the image faded to white, and then faded in to the new image, which is how some Lightbox clones do it (such as http://nyromodal.nyrodev.com/ )

- Option to position the Prev/Next and maybe Close to the center area of the lower navigation.

- When using the Prev/Next upper navigation images ('always'), I might like to use the hover option for the lower navigation too. (I understand the principle behind the navigation decisions but this would still be what I'd use.)

Anyway, these are just small things, I'm perfectly happy with the current script as-is. Thanks a lot!

Joel,
I love it when I get feedback like this. The best improvements to floatbox have been a result of input about problems and wish-lists. You get bonus points for taking the time to submit both. Thanks.

I'm very interested in the lowerNav positioning issue: this shouldn't happen. I'm hoping I can recruit a small bit of your time to help figure out what's going on. I strongly suspect arguments between included css sheets, with floatbox.css coming out the loser. I'd really appreciate it if you could try these three steps for me:
1) Put the original floatbox.css back in that results in lowernav positioning trouble. Rem out all the other stylesheets on the page. Problem goes away? Then I'm right about a css conflict. If this is the case...
2) Try adding the following to floatbox.css:
#fbFloatbox div {
border-width: 0;
margin: 0;
padding: 0;
}
Does that fix it? Good, we're done. If not...
3) Any chance of you setting up a page with the problem and send me the link so I can chop away at it?

Wish list:
You're right, when imageFadeDuration is set the image should fade both in and out. Currently it fades in but "snaps" out. I've already changed this in the next version's code and it looks better with the image fade-out. (This is what I mean about user input making floatbox better.)
Centering the lower controls: I'm not optimistic about this one. Positioning is a bear in floatbox - everything is measured, calculated and specified in absolute coordinates. And it's complicated by the fact that the caption etc. may or may not be present on the left. In other words, it's a lot of code and maybe not enough bang for the buck.
And the last one I don't understand. Do you mean that when upperNav is set to always show, the lowerNav controls should light up (underline etc.) when hovering on the upperNav panels?

Thanks again. Feel free to respond here, directly through the contact form, or not at all.

Cheers...

Hi,

Floatbox is very good job, thanks. We were searching for many simmilar sollution and Yours is the best, but we have some small issues with floatbox.

I'm working with Floatbox and ajax pagination. Links are in ajax layer, so after ajax request new ones are loaded. Problem is that after ajax when I click in link floatbox is not loaded. I solved it by adding this js code to callback runned after ajax completion:

fb.tagAnchors(document);

I'm not sure if this is correct, but it works for me ;)

Next problem is IE6 and dropdowns( select inputs ). When I close floatbox some of my dropdowns won't appear and focus is done on select which wasn't been touch before. Dropdowns which doesn't appear are in ajax div, and outside of it but in div which has style.display='none'.

Thanks for Your time.

I've forgotten, we are working with floatbox 2.45 ;)

Problem with dropdowns ( select inputs ) is resolved. Changes in code:

js: --------------------------------
Floatbox.prototype.unhideElements = function(tagName) {
var els, el;
if ((els = this.objHiddenElements[tagName])) {
while(els.length) {
el = els.pop();
el.style.visibility = '';
// 'if' condition added only
if( ! this.ieOld )
el.focus();

el.blur();
}
}
};
end js: --------------------------------

Jan,
I'm so glad you found solutions. The IE6 select z-index bug is a hard one to deal with successfully in all possible combinations of late arriving content, hidden divs, etc. I'm surprised your simple conditional fixed it. I'll add that into the next build.

And yes, calling fb.tagAnchors(document) is the official way to light up new content that has been added to the page after the initial load.

Cheers...

This post is for subscription purposes only ;)

Once again, thanks for Floatbox - good stuff.

hi, me again

i just noticed that fb doesn't overlay or hide java applets, i haven't tested it all around, but i'm thinking that it probably can't be achieved. can it ?

I bet java applets can be hidden the same way unruly flash is.

In floatbox.js, find...
this.hideElements('object');
this.hideElements('embed');
...and add...
this.hideElements('applet');

Also find...
fb.unhideElements('object');
fb.unhideElements('embed');
...and add (you guessed it)...
fb.unhideElements('applet');

Ensure the hideFlash option is enabled. Let me know how it works out please. If it's a Good Thing I'll add an option in to the next version.

thanks, i'll try it. it's going to be a few hours before i get back to you though.

i got a chance to test it and it works in ie 5,6,7 opera 9, ff2,3 safari on pc and like 6 browsers on the mac.

thanks.

mmm

Great code Byron! The best I could find for my application...

A few questions and remarks:

- I am using your code to show a Keynote presentation in a web site. I have exported Keynote mainly to jpg's (through html export) but some slides with animations I have exported to flash (swf) as well.
- I combine jpg and swf in the slideshow using rel="iframe"; I also set the exact dimensions of the slides
- all the jpg's and swf's have the same dimension (800x450px)
- everything shows well in Safari (Mac and Windows) - very fast
- however, in Firefox the swf's don't always run and sometimes I get scroll bars. The scrollbars disappear when I reload the page (FF); it also rund much slower than in Safari
- same scrollbar problem in IE7 but reloading the page does not remove them.
- is there a way to avoid the scrollbar problems in FF and IE7?
- I am launching the presentation from iWeb but have created separate html pages for the different presentations.
- some of my presentations are very long (up to 180 slides). Is there a way to navigate more quickly through the presentatios, for instance by moving 10 slides forward/backward at the time?

Thanks, Guus

see the example here: http://www.cinque.be/test - click on "Inerton Theory" - there are three presentations.

Hi Guus,
In all my testing I have had good results keeping scrollbars off iframed flash content. One key part of making that happen is to ensure that the iframe child page has no padding or margin.
<body style="margin: 0; padding: 0;">
Also, make sure the width/height of the flash object exactly matches the rev tag options of the link that loads it and ensure "scrolling:no" is in that rev tag too. You may want to check out "view source" beside the "flash in a frame" link on my demo page and use that as a template. After much research and testing I've concluded that the structure of the flash object used there is the most reliable cross-browser standards-based way to do it.

As for jumping ahead/back 10 items, there is no simple way to do this in the current version. But I'll consider putting it in the new version. I imagine this using the control/command key with the right and left arrows to activate.

Cheers...

I like this script and look better than others, but there's a couple of things that I'd like to see, or get some tips on how to make the change myself.

For the slideshows on my site, they start resized to fit the screen. But a lot of users want to see them at full size. After they resize the image, then go onto the next one, they have to resize it too. Is there a way to always keep the images at full size once the user sets one image at full size, instead of having to click the full-size button each time? I don't really want to turn off the autoresize because a lot of users want to see the images resized.

Also, is there a way to set the preload to a number like 5, instead of all? If there are 30 images in the gallery, then it really slows down the user's browser. And just one image is too little.

Anyway, like the script otherwise and want to keep using it.

Thanks in advance.

Excellent script. First "lightbox" script to work on Opera, Safari(3), Firefox (3/3.1B), and IE (7,8B). Also the 14th one I've tried. Hahaha... that only took about 5 hours!

Triton,
Sorry for the delay in responding. It's a lovely sunny weekend here.

You can easily hack in a different preload count if you like. Find "!this.preloadCount" in the preloadNextImage function and change it to "this.preloadCount < 5". I'm not sure there's good value in making that change though. Please note that if preloadAll is false, the first image will be preloaded on start. After that, each time an image is displayed the next one begins to preload. In most circumstances this strategy will get all the images preloaded prior to them being needed.

As for linking autoResize to the last viewed state of the previous image, there's no quick hack to make that happen.

In IE6 within https protocol SSL popup appears when open floatbox. It's because iframe hasn't set 'src' attribute when initialize it - http://support.microsoft.com/default.aspx?scid=kb;en-us;261188.

To avoid this I changed code:

Floatbox.prototype.setNode = function(nodeType, id, parentNode, title) {
var node = this.doc.getElementById(id);
if (!node) {
node = this.doc.createElement(nodeType);
if (id) node.id = id;
if (nodeType == 'a') node.setAttribute('href', '#');
if (title && this.showHints != 'never') node.setAttribute('title', title);
if (nodeType == 'iframe') {
node.setAttribute('scrolling', this.itemScrolling);
node.setAttribute('frameBorder', '0');
node.setAttribute('align', 'middle');

// problem with SSL popoup in IE6
if( this.ieOld )
node.setAttribute('src', 'javascript:false;');
}
parentNode.appendChild(node);
}
node.className = id + '_' + this.theme;
node.style.display = 'none';
return node;
};

Thanks for the tip Jan. I recall someone else having trouble with SSL warnings in IE6 but I couldn't help. I'm glad you found a solution. FYI, instead of your code I'll just use
node.src = 'javascript:"";';
The empty string is better than false as the resulting javascript output gets displayed and yours will display the string "false" if the real content is not quick enough coming in. I've thrown out the IEOld conditional since this addition is harmless and maybe a Good Thing for other browsers too.

Neither of the solutions below helped me with the IE6 popup problem. I get the popup when browsing to any SSL page on my site that has a floatbox image on it. I'm using floatbox on the admin side of my e-commerce site so I can't provide a link right now. I will create a simplified test page to make sure there isn't something else causing it. FYI it also occurs for me with Lytebox, which I use on the customers side of the website. For now I am making sure that there are no floatbox/lytebox items on any SSL pages on the customer side so they don't see that popup. For reference this is the code I am using just to make sure I did it right:

Floatbox.prototype.setNode = function(nodeType, id, parentNode, title) {
var node = this.doc.getElementById(id);
if (!node) {
node = this.doc.createElement(nodeType);
if (id) node.id = id;
if (nodeType == 'a') node.setAttribute('href', '#');
if (title && this.showHints != 'never') node.setAttribute('title', title);
if (nodeType == 'iframe') {
node.setAttribute('scrolling', this.itemScrolling);
node.setAttribute('frameBorder', '0');
node.setAttribute('align', 'middle');
node.src = 'javascript:"";';
}
parentNode.appendChild(node);
}
node.className = id + '_' + this.theme;
node.style.display = 'none';
return node;
};

I also tried Jan's method which didn't work either. I will post again when I have a test page up for viewing.

Re: IE6 & SSL
It might be worth setting up a dummy page with no content and trying
node.src = 'dummy.html';
with the appropriate path to the dummy. I'm just guessing. I don't have easy access to a SSL test site.

Also, some folks advocate javascript:void(0) in preference to javascript:false and javascript:""

It appears that the problem must be something else on my site. I set up a test page with a default install of 2.45 and the problem does not occur: https://www.centralvacuumfactory.com/floatbox/

On that page I am doing an image gallery, which is how I'm using it on the admin side of my e-commerce site. I will do some further testing and try to figure out exactly what on my site is triggering this. There are several other css and javascript files being loaded on my admin page, so I will see if including those on the test page changes anything.

The IE6/SSL warning problem is only with iframed content, not images.

That would explain why the fix didn't work for me, lol. I get the popup with images on my admin page but not on my test page. I am using relative links and I have verified that I am not linking to any non-ssl files. I'm probably just missing something obvious, so I'm sure it'll come to me eventually.

Sorry for posting before testing.
'javascript:void(0)' is no good.
'javascript:""' is the best.

Wow... just looked at your iframe demo page... have you had any comments on the gun to head toon?

According to the instructions, I should be able to place html styles and tags in the rev caption attribute. I have been unsuccessful in getting <a> tags or <span> tags to work. I have the following code written in an a tag:

rev="width: 650px height: 520px caption:`<b>Test</b><br />Test1<span style="font-size:.8em;">test2</span>`"

The <b> tags and <br /> tags work fine in the caption alone, but the addition of the code above breaks the functionality of the caption. Everything else works great.

What am I doing wrong?

Gabriel,
You have to encode the quotes in your caption html. The browser can't parse the rev attribute as you intend it to when there are internal quotes. Use ...<span style=&quot;font-size:.8em;&quot;>...

Thank you!

I had the same problem as Joel with the prev/next buttons when trying to integrate Floatbox with Magento (http://www.magentocommerce.com/)
It was definitely a conflict with the css, but the fix is rather simple. Magento loads a reset.css that sets text-align: center; on the body tag. The fix is to set text-align: left; on #fbLowerNav. So it should look like this:

#fbLowerNav {
float: left;
text-align: left;
width: 88px; /* sum of lowerprev and lowernext widths */
height: 14px; /* height of 1 sprite panel in lowerprev and lowernext graphics */
padding-right: 6px; /* spacing between controls */
}

I960, Thanks for providing the fix. I've merged the change into the v2.46 download. I implemented it a little more broadly than your targeted fix in the hopes of covering other potential css conflicts as well. The new css additions are:

#fbBox div {
border-width: 0;
margin: 0;
padding: 0;
text-align: left;
}

Unfortunately that fix doesn't appear to work with Magento. I took a screenshot of what happens using only your fix: http://i36.tinypic.com/149bn81.jpg
Adding what I did clears it up. If you can find a better alternative then I will test it out and let you know. I plan on writing a wiki article on how t