Question

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

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

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

它应该看起来像这样，但它没有：

enter image description here

以下是我的一些代码：

列出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文件是here on jsfiddle

Answer 1

问题是您通过<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和close图标，请确保fancybox_sprite.png文件与fancybox css文件位于同一目录

fancybox.js，丢失的精灵，Rails不寻常的照片行为

1 个答案: