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). И, наконец, вот что я хотел бы быть «lightboxed» ...

<% @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> 

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

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

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

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

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

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

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

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

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

Вам необходимо изменить их, чтобы они соответствовали друг другу.

Сам фрагмент javascript должен быть в файле application.js.

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

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

Answer 2

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

<a class="single_image" .... 

тогда ваш сценарий должен быть:

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

, но если с рельсами вы устанавливаете другой класс ("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'}); 
});