Question

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

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

我搜索了SO，发现了similair问题，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中的“网络”选项卡，可能是服务器错误 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

请试试

的application.js

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

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

application.css

*= require_self
*= require fancybox
*= require_tree .

您的观看页面

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

花式框图像弹出窗口

2 个答案: