This article is a follow-up to my (oddly?) popular article Simple Modal Boxes: FaceBox with Prototype which, as the name implies, talks about how to get FaceBox ( the amazingly cool JQuery Facebox-like modal window) to work with the Prototype framework, and then releases that code under the MIT license.
Ippatsu's Flashcard FaceBox
Where things went wrong: IFrames
I was fairly forthcoming about it when I released version 1.1, but my FaceBox had a major problem: Loading full HTML pages (as opposed to html snippets) borked the system. It was a combination of the <head> and <body> tags along with all that excess Javascript and CSS being loaded into an inline div that pretty much did it in. IE6 would display it (poorly) while anything else just gave up and displayed an empty box.
So I fixed it.
Starting with version 1.2 you can set a facebox to load in an IFrame by simply adding the tag “iframe” to the rel tag of the link.
So <a rel="facebox" href="mypage.html">My Page!</a> becomes <a rel="facebox iframe" href="http://google.com">Google</a>
and now you’re cooking with crisco. The page will be loaded in an IFrame, and any links will be self-contained within that iframe unless you specifically break out of it.
Breaking backwards compatibility
So, I am a big believer in backwards compatibility, but unfortunately adding the iframe option, along with my desire to adhere to better HTML coding practices has made me break backwards compatibility with version 1.1.
But wait!
It’s simple to change over, and you can change over almost all your code with a simple search/replace! So let’s get to it!
New way to handle classes
The old way of handing classes was to simply put all the classes you wanted to use after a hyphen after the facebox tag, like so:
<a href="mypage.html" rel="facebox-class1 class2">My Classy Page!</a>
This brings about the problem that now “iframe” is just thought of as a class. (It’s also not very contained, and rather messy). So I changed to to be more self-contained by putting the classes in square brackets []:
The new Code
<a href="mypage.html" rel="facebox[class1 class2]">My Classy Page!</a>
Now you know exactly what is a class, and what is not, and it’s easier to use it in conjunction with the IFrames option above.
<a href="http://google.com" rel="facebox[class1 class2] iframe">This loads google in its own classy iframe</a>
Simple as pie.
New way to handle styles
Originally, my way to handle styles (useful for setting the height and width of a Facebox for a single message or page) was to put the data in the rev tag and just pass that through to the FaceBox. However, with the new class syntax, I had a chance to change the way that the styling works.
Also, the rev tag is used to describe how the current document applies to the link, so it really isn’t a good place to put the data syntactically. It’s much better to put it in the rel tag along with the class information.
The new code
So where you used to use the rev tag:
<a href="mypage.html" rel="facebox" rev="width: 500px; height: 300px">My Stylish Page!</a>
You'll now use curly brackets in the rel tag:
<a href="mypage.html" rel="facebox{width: 500px; height: 300px}">My Stylish Page!</a>
And we can combine that with the iframes and classes above, to further customize our facebox
Class and Style
<a href="mypage.html" rel="facebox[class1 class2]{width: 500px; height: 300px}">My Classy Stylish Page!</a>
Iframe Class and Style
<a href="http://google.com" rel="facebox[class1 class2]{width: 500px; height: 300px} iframe">This loads google in its own classy and stylish iframe</a>
Download the code
You can download the code right here! It’s Open sourced under the MIT License.
If you find any problems or bugs, feel free to drop me a comment!
Download FaceBox v 1.2 (Open sourced under the MIT License)
