2

如果有人熟悉Fancybox，也许您可​​以帮助我解决我遇到的几个问题：

首先，当我单击图像时，背景中的图像会消失。如果我继续单击图像，最终所有图像都会消失。

我遇到的另一个问题是上一个，下一个，精灵没有出现或工作。

它应该看起来像这样，但它不是：

在此处输入图像描述

这是我的一些代码：

列出 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

我正在使用的 fancybox javascript 文件 css 文件在 jsfiddle 上

4

1 回答 1

2

问题是您通过 将fancybox 绑定到<img />标签，class="thumbnail"因此它们被视为内联内容（display:none;当关闭fancybox 时，内联内容已设置为返回到文档流中的位置）

您要做的是将图像包装在锚<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和close图标，请确保该fancybox_sprite.png文件与 fancybox css 文件位于同一目录中

于 2013-02-27T21:05:34.887 回答