Question

I am having some trouble setting up FancyBox, I am somewhat new to jQuery. I followed their guide, but I don’t see anywhere that I could have gone wrong.

I have linked the .css files and the .js files that I need. I know they are linked properly because if I view the source and click on the /assets/jquery.fancybox.css?body=1 and /assets/jquery.fancybox.css?body=1 I can see the proper Javscript and CSS files.

Because I am using Ruby on Rails I added this line to my application.js file:

$(document).ready(function() {
    $(".fancybox").fancybox();
});

And then just to test I added this into one of my pages, but instead of appearing in FancyBox it just opens the image in a new page:

<a class="fancybox" rel="group" href="http://farm8.staticflickr.com/7171/6417719753_374653e28c_b.jpg"><img src="http://farm8.staticflickr.com/7171/6417719753_374653e28c_m.jpg" alt="" />link</a>

As far as I know, it should be working, I have the class set to “fancybox” and the script looking for an object with a “fancybox” class.

EDIT: I seem to have fixed it by adding

$(document).ready(function() {
    $(".fancybox").fancybox();
});

To the .erb file of a specific page. Why would this not work if added to application.js? Is there a good way to fix this?

Answer 1

I would guess that your application.js file is being loaded before the jQuery source, and hence $ isn’t available yet.

Be sure to check your browser’s console for errors in these situations – it can save you a lot of headaches.