Rails 3.x Assets Pipeline Facebox jQuery Plugin (how to set up)

Question

I've been banging my head against the wall all night trying to figure out why the jQuery Facebox Plugin won't work in my Rails app. This is the error I'm getting, calling this from within doc ready:

$.facebox("<a href='#'>hello</a>");

I have a feeling it's something to do with assets pipeline, but not sure. This is how I've set up the needed files:

vendor/assets/images/facebox/
./loading.gif
./closelabel.png

vender/assets/javascripts/facebox/
./facebox.js

vender/assets/stylesheets/facebox/
./facebox.css

then in my application.css

...
*= require_self
 *= require_tree .
 *= require_tree ../../../vendor/assets/stylesheets/.
...

then in my application.js

...
//= require jquery
//= require jquery_ujs
//= require_tree ../../../vendor/assets/javascripts/.
//= require_tree .
...

throws this javascript error:

TypeError: Object function ( selector, context ) {// The jQuery object is actually just the init constructor 'enhanced'return new jQuery.fn.init( selector, context );} has no method 'facebox'

Answer 1

Just use the facebox-rails gem and your life will improve immensely.

Since this took me 2 hours of frustration trying to figure out, I figured I would post my solution, which took me all of 2 minutes to set up.

I really like the solution of putting it into a gem as well because you don't have to go through the pain of splitting all the files up and making sure you put them in the right place and configured the paths. Since I use this popup across all my projects, it really comes in andy. Seriously, thanks to the guys who made this gem!