fancybox.js，失踪精灵，为Rails

不寻常的照片的行为如果任何人都熟悉Fancybox也许你可以帮我解决了几个我有问题：fancybox.js，失踪精灵，为Rails

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

我遇到的另一个问题是prev，next，sprites没有显示或工作。

它应该是这样的，但它并不：

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

来源

2013-02-27 Benamir

的问题是，你是通过class="thumbnail"所以他们像对待结合的fancybox的<img />标签内嵌内容（内联内容已成立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-27 21:05:34 JFK

感谢您的帮助。除了fancybox-next和fancybox-prev之外，一切都有效。 fancybox关闭工程，并呈现精灵。任何想法为什么？感谢您的帮助。 – Benamir 2013-03-02 20:56:29

我想你还需要添加'rel =“gallery”'到每个锚点来创建图库（所以next/prev导航箭头将出现）...看到我编辑的答案 – JFK 2013-03-02 21:24:28

就是这样！谢谢@JFK。 – Benamir 2013-03-02 21:41:52

fancybox.js，失踪精灵，为Rails

回答

相关问题