Porting Facebox from jQuery to Prototype

If you haven’t seen ErrFree’s Facebox jQuery plugin, go check it out. It’s a great little lightbox mod that works with the excellent, lightweight jQuery javascript library. It’s based on the way Facebook often “pops-open” a new modal window on top of the currently loaded page. It’s a handy little way of doing things, and the first time I saw Chris Wanstrath’s Facebox plugin, I thought, “This could be perfect for a few different things I’ve got coming up.”

The only problem: it uses jQuery, where as pretty much every project I work on uses Prototype. I like Prototype; it’s intuitive and powerful. Yes, it’s a bit bloated, but if you compress your javascript with something like the Rails asset packager plugin (which you should), filesize becomes much less of an issue. That being said, jQuery is also a great JS library.

Anyway, the point is, I couldn’t use Facebox without doing one of two things:

1) include both jQuery and Prototype so all my javascript would continue to work (BTW, jQuery plays really nice with other javascript libraries, but that’s another post for another time)

2) rewrite all my current javascript to use jQuery instead of Prototype.

Neither one of these options really seemed like a good option. Not only that, if I wanted to use Facebox at all in any other project, I would be faced with the same choice with each project.

So, I decided that there was indeed, a third, better option: rewrite Facebox to work with Prototype. Long story short, that’s what I did, and I couldn’t be happier. Here are the results (you’ll have to be reading this on the site not in a feed-reader for these examples to work properly):

With Facebox, you can…

…load a remote page.

…load an image.

…even load a certain section of the current page

By rewriting Facebox to use Prototype, using it in your rails project (or any other project using Prototype) becomes as easy as including the facebox.js file on your page and adding rel=”facebox” to any links you would like to add the functionality to.

Get Facebox for Prototype here: http://dev.philburrows.com/svn/javascript/facebox/

NOTE: at the time of this writing, in order for things to look just right, you’ll need to go grab the required images and CSS file from the official Facebox page( http://famspam.com/facebox/ ).

BTW, I really need to create some sort of commenting system for this blog of mine…

Posted by Phil Burrows on May 05, 2008

Comments

  1. Nick Lemke Saturday, April 11, 2009

    I am using prototype 1.6 and and the facebox is not centered. I added a bit of code to get it centered.

    
var faceBoxDimensions = $('facebox').getDimensions();

    then when your setting the left css property:

    
'left': pageScroll.left + ((document.viewport.getWidth() / 2) -  (dimensions.width / 2)) + 'px'
  2. Dan King Monday, January 11, 2010

    I was in the same boat. I've been using Prototype for a while and didn't want to have to include both Prototype and jQuery on my pages. This is an excellent solution and works perfectly! Thanks!

  3. Andy Friday, January 29, 2010

    Thanks for your work! Great job!

    If you want your facebox to fade away, replace the close function with this:

    
    close: function(){
        Effect.Fade($('facebox'));
    }
    Of course script.aculo.us library has to be included.

Post a comment