2014-10-28 125 views
1

所以我用这个轨宝石:https://github.com/kyparn/fancybox2-rails的fancybox打开新窗口

  • 在查看

的fancybox完美的作品在本地,但在分期和生产中使用的前端BackboneJS和实例的fancybox,图像在新窗口中打开。我检查了铬控制台,并确保fancybox存在,它是。

不完全确定如何解决这个问题/去调试这个。

这是我怎么有图像设置:

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

我实例化的fancybox设置在骨干查看每个图像是

setupFancyBox: function() { 
    var options = { 
     helpers: { 
     overlay: { 
      locked: false 
     } 
     } 
     }; 
     this.$("[data-fancybox='image']").fancybox(options); 
    } 
  • 调用此功能在视图的渲染方法。
+0

最有可能的另一个JS错误(吊装,jQuery的版本冲突等)是防止从的fancybox工作......但没有任何代码或的jsfiddle只是一个猜测 – JFK 2014-10-28 18:40:48

+0

控制台不会引起JS错误。 – Jayem 2014-10-28 19:27:50

+0

我对BackboneJS并不是很熟悉,但最后一行中的“this”是什么意思?也许它应该没有这个关键字,只需$(“[data-fancybox ='image']”)。fancybox(options); – dpa 2014-10-28 20:56:30

回答

2

所以本地没有关于我的图片扩展名(.JPG/.PNG),像这样:

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

但在生产/生活没有附加图片:

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

缺少扩展,造成的fancybox不激活我。

的修复程序会从这里取(Fancybox urls without .jpg opens not in box):

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

检查javascript控制台,如果出现一些javascript错误,它可以阻止进一步的javascript代码执行。 下一步尝试在控制台初始化的fancybox,只需运行该代码(当然可以用你自己的选择)

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

我试过了,它能够选择包装花哨箱图像的'a'标签。和fancybox是存在的。 – Jayem 2014-10-28 19:05:49

+0

你怎么把你的fancybox初始化代码放在哪里?你应该把它放在文档准备好的事件上。 – dpa 2014-10-28 19:14:07

+0

我刚更新了这个问题 – Jayem 2014-10-28 19:19:51