花哨的盒子图像弹出窗口

Question

我想在点击它时显示图像。我正在使用 Paperclip 来存储图像，并安装了 Fancy-box 来处理图像显示。 但我得到这样的错误。

The requested content cannot be loaded.
Please try again later.

我在 SO 中搜索，发现了类似的问题，Fancybox error in rails 尝试更改建议的链接，但没有结果。

我的 application.js 文件如下所示。

//= require jquery
//= require jquery_ujs
//= require_tree 
//= require fancybox

$(document).ready(function() { $("a.fancybox").fancybox(); });

我想要查看图像弹出窗口的显示视图（如本例中的http://fancybox.net/），如下所示。

<a class="fancybox"><%= image_tag @product.photo.url(:thumb) %></a> 

Answer 1

这里是一个带有源代码的 fancybox 示例：https://www.mgtechnologies.co.in/product/fancybox-responsive-jquery-pop-up

试试这个：

    <a class="fancybox" href="<%= @product.photo.url(:full) %>">
         <%= image_tag @product.photo.url(:thumb) %>
    </a> 

下一个

    $("a.fancybox") - is overhead selector
    $(".fancybox") - enought

点击devTools中的fancybox链接检查网络选项卡后，可能是服务器错误 http://monosnap.com/image/tByHYsWqawv0k5NAVvJrFgpt8

您可以在此处http://fancyapps.com/fancybox/fancybox 的现代文档中找到一些示例并检查 api

尝试解决方法以了解发生了什么：

 $(document).on('click', '.fancybox', (e)->
        $.fancybox.showLoading()
        $.ajax
               url: $(this).attr('href')
               success: (data)->
                 $.fancybox.hideLoading()
                 $.fancybox(data, {
                  afterShow:()->
                     // TODO something
                  overlay :
                    locked : true

                 })

                 true

               dataType: 'html'

        e.preventDefault()
      )

Answer 2

请试一试

应用程序.js

//= require jquery
//= require fancybox
//= require jquery_ujs
//= require_tree .

jQuery(function() {
  $("a.fancybox").fancybox();
});

应用程序.css

*= require_self
*= require fancybox
*= require_tree .

您的查看页面

<%= link_to(image_tag(@product.photo.url(:thumb)), @product.photo.url(:full), :class => 'fancybox')%>