从函数中打开fancybox

Question

我正在尝试从一个函数中打开一个fancybox - 简而言之，我的HTML代码如下：

<a href="#modalMine" onclick="myfunction(this); return false;">
  click
</a>

我的函数的一部分看起来像这样：

function myfunction(me) {
    $(me).fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true,
    });
}

上述方法在IE中有效，但在FireFox或Chrome中无效 - 有什么办法可以解决吗？我知道一种方法是触发另一个链接，但我希望有另一种解决方案。

- keysersoze

Answer 1

如果您想在调用JavaScript函数时打开fancybox，可能是在您的代码流程中而不是作为单击的结果。以下是您可以实现它的方法：

function openFancybox() {
  $.fancybox({
     'autoScale': true,
     'transitionIn': 'elastic',
     'transitionOut': 'elastic',
     'speedIn': 500,
     'speedOut': 300,
     'autoDimensions': true,
     'centerOnScroll': true,
     'href' : '#contentdiv'
  });
}

使用“contentdiv”创建盒子并打开它。

- Daniel

Answer 2

既然您正在使用jQuery，请停止在HTML中绑定事件处理程序，开始编写不依赖具体HTML结构的JavaScript代码。

$(document).ready(function ()
{
    function myfunction(me)
    {
        $(me).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true // remove the trailing comma!!
        }).click();
        // fire the click event after initializing fancybox on this element
        // this should open the fancybox
    }

    // use .one() so that the handler is executed at most once per element
    $('a[href=#modalMine]').one('click', function ()
    {
        myfunction(this);
        return false;
    });
});

然而，我并没有特别的理由在点击事件上设置fancybox。相反，你可以这样做：

$(document).ready(function ()
{
    function myfunction()
    {
        // note the use of "this" rather than a function argument
        $(this).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true
        });
    }

    $('a[href=#modalMine]').each(myfunction);
});

基础演示（无图像）→

- Matt Ball

---

看起来不太对，我不知道 fancybox 如何处理，但是它会在每次点击时重新初始化 fancybox。 - Felix Kling

@Felix：是的，我以前从未使用过fancybox——我只是在看OP的代码。 - Matt Ball

首先，我很抱歉我的打字错误 - 这是因为它只是一个更大的代码的一部分。其次，除非我点击两次我的链接，否则上述内容不起作用。 - keysersoze

@keysersoze：正如Felix在他的回答中指出的那样，这是因为fancybox添加了自己的点击处理程序，需要触发该处理程序才能显示fancybox。 - Matt Ball

很好的例子..谢谢！不过我有一个问题..如何关闭对话框？在给定的fiddle中点击关闭图标无效。 - Hiral Vadodaria

Answer 3

你需要的是：

$.fancybox.open({ .... });

请查看此处底部的"API方法"部分:

http://fancyapps.com/fancybox/

- Adrian Smith

---

但是Fancybox2可以工作，而1.3.4则存在缺陷。今天我在Rails 3.2应用程序中浪费了3个小时来解决版本1的错误，而如果一开始就花19美元购买Fancybox2，就不会出现这种情况了。 - jpw

Answer 4

您根本不需要添加自己的click事件处理程序。只需使用fancybox初始化元素即可：

$(function() {
    $('a[href="#modalMine"]').fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true  // as MattBall already said, remove the comma
    });
});

完成。Fancybox已经绑定了一个点击处理程序以打开盒子。请查看HowTo部分。

---

以后如果您想以编程方式打开盒子，请在该元素上引发click事件：

$('a[href="#modalMine"]').click();

- Felix Kling

---

我不按照你的建议和fancybox文档所写的原因是，我需要更多的功能来运行，而不仅仅是打开fancybox - 我的方法需要6个参数来处理例如窗口标题，哪个表单字段需要焦点以及完整+关闭代码。我的页面上的每个按钮都使用相同的窗口，但每个按钮在fancybox中工作时也有各自的操作。因此，如果我的函数看起来像这样function initModal(target, titletarget, titlestring, focus, completecode, closecode)，那么我应该如何在不同的按钮上使用它呢？ - keysersoze

Answer 5

您不必触发点击事件，可以使用fancybox类型的ajax实现。

$.fancybox.open({
      href: "http://........",
      type: 'ajax'
});

- Burcu Co

Answer 6

使参数对象扩展自<a>，并使用委托的点击事件中的fancybox的open函数。

    var paramsFancy={
         'autoScale': true,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'speedIn': 500,
         'speedOut': 300,
         'autoDimensions': true,
         'centerOnScroll': true,
         'href' : '#contentdiv'
      };

    $(document).delegate('a[href=#modalMine]','click',function(){
               /*Now you can call your function ,
   you can change fields of paramsFancy via this function */
                 myfunction(this);

                paramsFancy.href=$(this).attr('href');
                $.fancybox.open(paramsFancy);

    });

- Abdennour TOUMI

---

我相信.delegate()已经被弃用了。 - MAZux

我已经离开jQuery好几年了，请迁移到React或Preact。 - Abdennour TOUMI

Answer 7

function myfunction(){
    $('.classname').fancybox().trigger('click'); 
}

这对我有效。

- Prabhagaran

Answer 8

根据作者的技巧和窍门博客文章，以下是可行的代码，将其放在文档准备好的位置：

  $("#mybutton").click(function(){
    $(".fancybox").trigger('click');  
  })

这会触发当前显示的图像或内容的较小版本，就像您手动单击它一样。它避免了重新初始化Fancybox，而是在文档准备就绪时保留了您初始化它的参数。如果您需要在使用单独的按钮打开盒子时执行不同的操作，与单击盒子相比，您将需要这些参数，但对于许多人来说，这就是他们所寻找的。

- Henrik Erlandsson

Answer 9

答案似乎有点过于复杂了。希望我没有误解问题。

如果您只是想从“A”标签的单击打开一个花哨的框，请将您的HTML设置为:

<a id="my_fancybox" href="#contentdiv">click me</a>

您的盒子内容将位于id为“contentdiv”的div中，您可以在JavaScript中像这样初始化fancybox：

$('#my_fancybox').fancybox({
    'autoScale': true,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'speedIn': 500,
    'speedOut': 300,
    'autoDimensions': true,
    'centerOnScroll': true,
});

当单击锚标记时，将显示包含“contentdiv”的fancybox。

- Daniel

Answer 10

...
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
...
if($(".img_file[data-img]").length) {
                var imgs_slider_img = [];
                $(".img_file[data-img]").each(function(i) {
                    imgs_slider_img.push({
                        href:$(this).attr('data-img')
                    });
                    $(this).attr('data-index-img', i);
                }).on("click", function(e) {
                    e.preventDefault();
                    $.fancybox.open(imgs_slider_img, {
                         index: $(this).attr('data-index-img'),
                         padding: 0,
                         margin: 0,
                         prevEffect: 'elastic',
                         nextEffect: 'elastic',
                         maxWidth: '90%',
                         maxHeight: '90%',
                         autoWidth: true,
                         autoHeight: true
                    });
                });
            }
...

- Олег Стасюкевич

---

请在您的代码中提供更多信息，而不仅仅是代码示例。解释您做了什么以及为什么这回答了这个问题。 - MechMK1