Question

I’m trying to get fancybox (technically fancybox-rails) working in Rails 3.1. I started with the directions here … https://github.com/hecticjeff/fancybox-rails and then after quite some time discovered that I needed to add

<%= javascript_include_tag :application %>

to get things working (as an aside, why is the new asset pipeline better than just putting a javascript file in a known directory and using a javascipt_include_tag?). Anyway, now I’m not quite sure what to do. First is the css file for fancybox. Is this included somehow already? Do I have to do something similar to the above for the asset pipeline (I believe it’s supposed to handle css files also). Finally, here’s what I’d like to have “lightboxed” …

<% @image_files.each do |image_file_name| %>
    <%=link_to(image_tag image_file_name, :class=>"fancybox", :size => "200x200") %>
<% end %>

I have some images (jpg) in a directory pointed to by the image_file_name. These are showing up fine, but I’d like to be able to click on them and get the light box effect. So … what does my link_to/image_tag need to look like?

Am I missing anything else here?

——- Added information ——–

I should not that I do have some javascript for this …

$(document).ready(function(){
    // $("a img.fancybox").fancybox({'type': 'image'});
    a#single_image").fancybox({'type': 'image'});
    // $("$("a:has(img)").fancybox();
});

trying a few different things here and none seem to do much. I also added the following in the html just to simplify things with the Rails stuff …

<a class="single_image" href="/assets/card_images/birthday_cake.jpeg"><img src="/assets/card_images/birthday_cake.jpeg" alt=""/></a>

The image shows, but when I click on it, it just goes to a page showing the image. I also checked and it looks like the css is there based on this …

puts Rails.application.assets['jquery.fancybox.css'].body

which gave me something that started with this …

/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 *
 * Examples and documentation at: http://fancybox.net
 * 
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
 * 
 * Version: 1.3.4 (11/11/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

followed by a bunch of css. So I believe it’s there.

So … anyone have anything to try?

Answer 1

I’ll answer your aside first: “why is the new asset pipeline better than just putting a javascript file in a known directory and using a javascipt_include_tag?”

The Pipeline is parts of the Rails “fast by default” strategy. The old way of doing things – linking each file – resulted in multiple downloads and was slower than having just one file. The old way did not compress (minify) the content of the file, adding to download size (and page slowness).

The Pipeline combines content minification and compression with file concatenation to give you a single file for javascript and CSS for use in production. Added to this, the pipeline uses fingerprints in the filenames that are served. Have a read of the Rails asset pipeline guide, as this has a good explanation of why fingerprinting is useful.

Now on to your specific issue.

Fancybox works by attaching a click handler to the image links, and this drives the popup behaviour.

If you click on an image and it shows you full size image, this means that fancybox has not attached itself to the link.

I can see in your code that you are using the class “single_image” on your links. The Javascript snippet you have posted is expecting the class “fancybox”. (as JFK has the other answer)

You’ll need to change them to match.

The javascript snippet itself should be in the application.js file.

To get the CSS working for this you’ll also need to include the application CSS into your layout:

  stylesheet_link_tag    "application", :media => "all"
  javascript_include_tag "application"