2

誰かがFancyboxに精通しているなら、多分あなたは私が抱えているいくつかの問題を解決するのを手伝ってくれるでしょう：

まず、画像をクリックすると、背景の画像が消えます。画像をクリックし続けると、最終的にすべての画像が消えます。

私が抱えているもう1つの問題は、前、次、スプライトが表示されない、または機能しないことです。

このように見えるはずですが、そうではありません。

ここに画像の説明を入力してください

これが私のコードの一部です：

リストshow.html.erb： 

<div class="span4">


<% @listing.images.each_with_index do |image, index| %>
          <%if index == 0 %>

              <%= image_tag image.file, :class => "thumbnail"%>

          <%elsif index == 1%>
            <ul class="thumbnails small">               
              <li class="span4">
                <%= image_tag image.file, :class => "thumbnail"%>
              </li>                                 

          <%elsif index ==2%> 
              <li class="span4">
                <%= image_tag image.file, :class => "thumbnail"%>
              </li> 
          <%elsif index ==3%> 
              <li class="span4">
                <%= image_tag image.file, :class => "thumbnail"%>
              </li>
          <%else%> 
          </ul>          
          <%end%>        

        <% end %> 
      </div>

jquery.fancybox.css.scss

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('fancybox_sprite.png');
}

Listing.js.cofee

$ ->
  $("#myTab a:first").tab "show"
  $("#myTab a").click (e) ->
    e.preventDefault()
    $(this).tab "show"


$(document).ready ->
  $(".thumbnail").fancybox
    openEffect: "none"
    closeEffect: "none"

  $(".carousel").carousel interval: false

私が使用しているfancyboxjavascriptファイルcssファイルはここjsfiddleにあります

4

1 に答える 1

2

<img />問題は、fancyboxをタグにバインドしているため、タグがインラインclass="thumbnail"コンテンツのように扱われることです（インラインコンテンツは、fancyboxを閉じるときにドキュメントのフロー内の位置に戻されたときに設定されます）display:none;

あなたがしなければならないことは、アンカー<a>タグ内に画像をラップclass="thumbnail"し、そのアンカーに設定することです。したがって、これを使用する代わりに（レンダリングされたhtml）

<img class="thumbnail" src="images/01.jpg" alt="" />

...あなたはこれを持っている必要があります：

<a class="thumbnail" href="images/01.jpg" rel="gallery"><img src="thumbs/01.jpg" alt="" /></a>

prev、nextおよびアイコンに関しては、ファイルがfancyboxcssファイルと同じディレクトリにあるcloseことを確認してくださいfancybox_sprite.png

于 2013-02-27T21:05:34.887 に答える