Question

我遇到了fancybox-rails的问题。

基本上，我希望有一个可点击的图像。当我点击它时，会打开一个fancybox，其中包含有关图像的一些信息...

我遇到的问题是，第一次点击，没有任何反应，第二次，文本出现在fancybox中（作为规范）。第三，它打开一个装满整个页面的fancybox !!

以下是HTML代码：

<a href="#data-1" data-fancybox="#data-1" id="info-1">
  <img alt="Some image info" src="the_image.JPG"></a>
</div>
<div style="display:none">
  <div id="data-1">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div> 
</div>

我的jQuery代码如下：

$(document).ready(function(){
  $("[data-fancybox]").click(function(){
  $(this).fancybox();
  });
});

您是否在代码中看到了可以解释此行为的明显内容？

谢谢！

P.S：版本是fancybox-1，ruby-on-rails-4

Answer 1

在您的Javascript文件中，（例如 app / assets / javascripts / posts.js ）：

var ready;
ready = function() {

  $("[data-fancybox]").fancybox({
    'content': $('#data-1')
  });

};
$(document).ready(ready);
$(document).on('page:load', ready);

周围的“文档就绪”代码与turbolinks很好用，默认情况下在Rails 4中启用。

注意：我认为 fancybox 中存在错误，此解决方案是一种不会触发错误的黑客解决方法。 API docs表示内容属性“强制内容（可以是任何html数据）。”

Answer 2

这个问题

$(document).ready(function(){
  $("[data-fancybox]").click(function(){
      $(this).fancybox();
  });
});

...它不会触发click上的fancybox，它只会在第一个[data-fancybox]之后将click绑定到fancybox，但仍然需要第二个click解雇fancybox。

你实际上只需要这样做

$(document).ready(function () {
    $("[data-fancybox]").fancybox();
});

并且[data-fancybox]元素将绑定到fancybox，之后fancybox将处理任何click事件。

参见 JSFIDDLE

Fancybox在框中加载整个页面而不是文本div

2 个答案: