Fancybox - cannot open image in the Fancybox window

Question

I stuck with setting up the Fancybox window for my photos, I am doing it like this:

$(document).ready(function() {  
  $('.fancybox').fancybox();
});

This is initialization of Fancybox. Then the setup of links and images:

= link_to i.file_url, :class => 'fancybox', :rel => 'gallery', :title => i.title do
  = image_tag i.file_url, :style => 'width: 150px;'

which generates this HTML code:

<a href="URL TO FILE" class="fancybox" rel="gallery" title="Item Name">
  <img alt="something" src="URL TO FILE" style="width: 150px;">
</a>

But when I click on the link, the image is loaded in the new window instead of in the Fancybox window. The Fancybox JS+CSS libraries are added correctly - what am I missing yet?

Thanks

The URL is like this: `https://www.filepicker.io/api/file/sLTR1nF1QW1234567890` — user984621, Aug 17 '13 at 12:21
Yes, I do. When I put it to the URL, I see there the image (I changed the last string as I didn't wanted to put here the original one). But this made me think if cannot be a problem in the format of the URL - if I put the an URL with image extension (like JPG or so), it's working, but not with this URL. Does Fancybox require the file-type extension in the end of an URL? — user984621, Aug 17 '13 at 13:04
Yes, I just tested the ** jsfiddle** by Michael B. and when I put the the generated URL from FilePicker, it doens't work. How to solve this thing? — user984621, Aug 17 '13 at 13:06

MasterAM · Accepted Answer · 2013-08-17T13:28:04.123

0

The problem in your case is that your URL pattern is not identified by fancyBox.

You should explicitly specify it in your options:

    $('.fancybox').fancybox({type:'image'});

edited Aug 17 '13 at 13:28

answered Aug 17 '13 at 13:13

MasterAM

16,283
6
45
66

Thanks MasterAM. When I try this, I will get this error message (in the Fancybox window): **The requested content cannot be loaded. Please try again later.** – user984621 Aug 17 '13 at 13:17
Which means that the URL is probably invalid. – MasterAM Aug 17 '13 at 13:18
No, the URL is valid, I can see the image when I put the URL into the browser. – user984621 Aug 17 '13 at 13:20
I just check the documentation and the correct format is **$(".selector").fancybox({'type' : 'image'});** – user984621 Aug 17 '13 at 13:21

Fancybox - cannot open image in the Fancybox window

1 Answers1