Rails 3.1 - Fancybox

Question

Я пытаюсь заставить fancybox (технически fancybox-rails) работать в Rails 3.1. Я начал с указаний здесь ... https://github.com/hecticjeff/fancybox-rails, а затем через некоторое время обнаружил, что мне нужно добавить

<%= javascript_include_tag :application %>

чтобы все заработало (кроме того, почему новый конвейер ресурсов лучше, чем просто поместить файл javascript в известный каталог и использовать javascipt_include_tag?). Во всяком случае, сейчас я не совсем уверен, что делать. Первый - это файл css для fancybox. Это как-то уже включено? Должен ли я сделать что-то подобное вышеописанному для конвейера ресурсов (я полагаю, что он должен обрабатывать и CSS-файлы). Наконец, вот что я хотел бы, чтобы "лайтбокс" ...

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

У меня есть несколько изображений (jpg) в каталоге, на который указывает image_file_name. Они хорошо отображаются, но я хотел бы иметь возможность нажать на них и получить эффект лайт-бокса. Итак ... как должен выглядеть мой link_to / image_tag?

Я что-то здесь упускаю?

------- Добавлена ​​информация --------

Мне не следует, что у меня есть какой-то javascript для этого ...

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

пробует несколько разных вещей здесь, и, похоже, никто не делает много. Я также добавил следующее в html, чтобы упростить вещи с помощью Rails ...

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

Изображение показывает, но когда я нажимаю на него, оно просто переходит на страницу с изображением. Я также проверил, и, похоже, что CSS основан на этом ...

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

, который дал мне что-то, что началось с этого ...

/*
 * 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
 */

сопровождается связкой css. Поэтому я верю, что это там.

Так ... кому-нибудь есть что попробовать?

Answer 1

Если вы используете:

<a class="single_image" ....

, тогда ваш скрипт должен быть:

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

, но если с помощью rails вы устанавливаете другой класс (например, "fancybox"), например:

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

тогда скрипт js должен соответствовать классу селектора:

$(document).ready(function(){
 $("a.fancybox").fancybox({'type': 'image'});
});

Answer 2

Сначала я отвечу на ваш вопрос: «Почему новый конвейер ресурсов лучше, чем просто поместить файл javascript в известный каталог и использовать javascipt_include_tag?»

Трубопровод - это часть Rails »по умолчанию "стратегия.Старый способ работы - связывание каждого файла - приводил к нескольким загрузкам и был медленнее, чем наличие только одного файла.Старый способ не сжимал (минимизировал) содержимое файла, добавляя к размеру загрузки (и медлительности страницы).

Pipeline сочетает минимизацию и сжатие содержимого с конкатенацией файлов, чтобы дать вам один файл для javascript иCSS для использования в производстве.В дополнение к этому, конвейер использует отпечатки пальцев в именах файлов, которые обслуживаются.Прочтите руководство по конвейеру ресурсов Rails , так как здесь есть хорошее объяснение того, почему полезны дактилоскопии.

Теперь перейдем к вашей конкретной проблеме.

Fancybox работает отприсоединение обработчика кликов к ссылкам на изображения, и это вызывает поведение всплывающего окна.

Если вы щелкнете по изображению, и оно покажет вам полноразмерное изображение, это означает, что fancybox не присоединился к ссылке.

Я вижу в вашем коде, что вы используете класс "single_image" в своих ссылках.Размещенный вами фрагмент Javascript ожидает класса «fancybox».(поскольку у JFK есть другой ответ)

Вам необходимо изменить их для соответствия.

Сам фрагмент javascript должен находиться в файле application.js.

Toчтобы CSS работал для этого, вам также необходимо включить CSS приложения в свой макет:

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