Fancybox opens new window

Question

So I am using this rails gem: https://github.com/kyparn/fancybox2-rails

Using BackboneJS for frontend and instantiating fancybox in the View

Fancybox works perfectly locally but on staging and production, images are opened in a new window. I checked chrome console and made sure that fancybox was present, and it is.

Not entirely sure how to resolve this / go about debugging this.

This is how I have images setup:

   <a class="fancybox-image" data-fancybox="image" href="image_url">
   <img src="image_url" data-js="activate-img-modal">
   </a>

I am instantiating fancybox setup in the Backbone View where each image is in.

  setupFancyBox: function() {
     var options = {
       helpers: {
         overlay: {
           locked: false
         }
        }
      };
      this.$("[data-fancybox='image']").fancybox(options);
  }

This function is called in the View's render method.

most likely another js error (hoisting, jQuery version conflicts, etc.) is preventing fancybox from working ... but without any code or jsfiddle is just a guess — JFK, Oct 28 '14 at 18:40
I am not very familiar with BackboneJS, but what mean "this" in last line? Maybe it should by without this keyword, just $("[data-fancybox='image']").fancybox(options); — dpa, Oct 28 '14 at 20:56

score 2 · Accepted Answer · edited May 23 '17 at 12:29

So locally there were extensions on my images (.jpg/.png) like so:

 <a class="fancybox-image" data-fancybox="image" href="path/to/image1.png">
   <img src="path/to/image1.png" data-js="activate-img-modal">
 </a>

But on production/live there were no image extensions:

 <a class="fancybox-image" data-fancybox="image" href="path/to/image1.">
   <img src="path/to/image1." data-js="activate-img-modal">
 </a>

Missing the extension, caused fancybox not to activate for me.

A Fix would be taken from here (Fancybox urls without .jpg opens not in box):

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

score 0 · Answer 2 · answered Oct 28 '14 at 18:44

0

Check javascript console, if appears some javascript error it can prevent from further javascript code execution. Next step try initialize fancybox in console, simply run this code (of course use your own selector)

$("a.fancybox").fancybox();

answered Oct 28 '14 at 18:44

dpa

427
4
16

I tried this and it is able to select the 'a' tags that wrap the images for fancybox. And fancybox is present. – Jayem Oct 28 '14 at 19:05
How and where you put your fancybox initialization code? You should put it on document ready event. – dpa Oct 28 '14 at 19:14
I just updated the question – Jayem Oct 28 '14 at 19:19

Fancybox opens new window

2 Answers2