fancy box image popup

Question

I want to show image on click on it. I am using Paperclip to store images, and Fancy-box installed to process image display. But I get such error.

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

I searched in SO, and found similair question, Fancybox error in rails tried to change links like suggested but no results.

My application.js file looks like this.

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

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

My show view where I want to see the popup of the image (like in this example http://fancybox.net/ ), looks like this.

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

Answer 1

Here is a proper example of fancybox with source code: https://www.mgtechnologies.co.in/product/fancybox-responsive-jquery-pop-up

try this:

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

next

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

after clicking the fancybox link check Network tab in devTools, it could be server error http://monosnap.com/image/tByHYsWqawv0k5NAVvJrFgpt8

you could find some samples and check api in modern documentation of fancybox here http://fancyapps.com/fancybox/

Try that work around for understand what is going on:

 $(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

Please have a try with

application.js

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

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

application.css

*= require_self
*= require fancybox
*= require_tree .

your view page

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