Rails 3.1 - Fancybox

Question

Rails 3.1で動作するfancybox（技術的にはfancybox-rails）を取得しようとしています。さておき、なぜ新しいアセットパイプラインは、単にJavaScriptを置くよりも優れているように私は（かなりの時間が、私は物事が働いて取得する

<%= javascript_include_tag :application %> 

を追加するために必要なことを発見した後、その後https://github.com/hecticjeff/fancybox-rails ...ここ方向で開始し、 javascipt_include_tag？を使用しています）。とにかく、今私は何をすべきか分かりません。まず、fancybox用のcssファイルです。これはすでに何らかの形で組み込まれていますか？私はアセットパイプラインのために上記と同様のことをしなければならないのですか（私はそれもCSSファイルを扱うと思われます）。最後に、ここで私がイメージ_ファイルの_名前で指されるディレクトリ内の一部の画像（JPG）を持っている

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

...私は「lightboxed」しているしたいものです。これらはうまく表示されていますが、それらをクリックしてライトボックス効果を得ることができるようにしたいと思います。だから...私のlink_to/image_tagはどのように見える必要がありますか？

ここに他のものがありますか？

-------情報を追加しました--------

私は、このためのいくつかのjavascriptを持っているべきではないと...

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

異なるいくつかをしようとここにいるものとそうでないものはあまり関係ないようです。私はまた、画像のショーは...ちょうどRailsのもので物事を単純化するために、HTMLで

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

を以下を追加しましたが、私はそれをクリックすると、それだけで画像を表示するページに移動します。私もチェックしてCSSがこれに基づいているようにそれは

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

私にこれを始めた何かを与えた

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

が... CSSの束が続く...見えます。だから私はそこにいると信じている。

だから誰も試してみたいことがありますか？

Answer 1

私は最初に答えます： "新しいアセットパイプラインは、単にjavascriptファイルを既知のディレクトリに置き、javascipt_include_tagを使用するよりも優れていますか？"

パイプラインは、「デフォルトで高速」の戦略の一部です。各ファイルをリンクする従来のやり方では、複数のダウンロードが行われ、ファイルが1つしかない場合よりも時間がかかりました。古い方法では、ファイルの内容を圧縮（縮小）してダウンロードサイズ（およびページの遅さ）を追加しませんでした。

Pipelineは、コンテンツの縮小と圧縮をファイル連結と組み合わせて、本番環境で使用するためのjavascriptとCSS用の単一のファイルを提供します。これに加えて、パイプラインは、提供されたファイル名の指紋を使用する。 Rails asset pipeline guideを読んでください。これはフィンガープリンティングがなぜ有用なのかをよく説明しています。

あなたの特定の問題につきまして

ファンシーボックスは画像リンクにクリックハンドラを付けることで動作し、ポップアップ動作を駆動します。

イメージをクリックすると、フルサイズのイメージが表示されます。これは、fancyboxがリンクに自身を添付していないことを意味します。

あなたのコードでは、リンク上で "single_image"というクラスを使用していることがわかります。投稿したJavascriptスニペットは、クラス "fancybox"を期待しています。 （JFKがもう1つの答えを持っているので）

あなたはそれに合わせて変更する必要があります。

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'}); 
});