花式框圖像彈出

Question

我想在其上顯示圖像。 我正在使用回形針存儲圖像，並安裝了花式盒來處理圖像顯示。 但是我得到這樣的錯誤。

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

我在SO中進行搜索，發現了類似的問題， Rails中的Fancybox錯誤嘗試更改建議的鏈接，但沒有結果。

我的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-sensitive-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

單擊fancybox鏈接后，檢查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')%>