从函数打开fancybox答案

【问题标题】：Open fancybox from function从函数打开fancybox
【发布时间】：2017-11-23 22:35:45
【问题描述】：

我正在尝试从我拥有的函数中打开一个花式框 - 简而言之，我的 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 中无效 - 知道如何解决这个问题吗？我知道为什么要触发另一个链接，但我希望另一种解决方案是可能的。

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

如果您想在调用 javascript 函数时简单地打开一个幻想框。也许在您的代码流中，而不是作为点击的结果。以下是你的做法：

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

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

【讨论】：

【解决方案2】：

由于您使用的是 jQuery，因此请停止在 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;
    });
});

但是，我没有特别看到设置点击时幻想框的理由。你可以这样做：

$(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);
});

Basic demo (no images) →

【讨论】：

这看起来不对。我不知道fancybox 是如何处理它的，但这会在每次点击时重新初始化fancybox。
@Felix：是的，我以前从未使用过 fancybox - 我只是在查看 OP 的代码。
首先我很抱歉我的错字 - 这是因为它只是更大代码的一部分。接下来，除非我在链接上单击两次，否则上述方法不起作用。
@keyssersoze：正如 Felix 在他的回答中指出的那样，这是因为 fancybox 添加了自己的点击处理程序，这是使 fancybox 显示需要触发的。
虽然您一直在提出建议，但我也使用以下代码修复了它$(document).ready(function () { myfunction(this, null, ....); $('.link').each(function () { myfunction(this, 'dosomething(' + this.id + ');', ....);'); }); }); 所以非常感谢您的帮助:)

【解决方案3】：

你需要的是：

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

请参阅此处底部的“API 方法”部分：

http://fancyapps.com/fancybox/

【讨论】：

但是 Fancybox2 可以工作，不像 1.3.4 那样有漏洞。今天我用一个 rails 3.2 应用程序在版本 1 的错误上浪费了 3 个，当时我最初可以为 Fancybox2 投资 19 美元。

【解决方案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 已经绑定了一个打开盒子的click 处理程序。 Have a look at the HowTo section.

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

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

【讨论】：

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

【解决方案5】：

您不必触发点击事件，您可以使用fancybox 类型作为ajax 来完成。

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

【讨论】：

【解决方案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);

    });

【讨论】：

我相信 .delegate() 已被弃用。
几年前我就和 jQuery 离婚了。请迁移到 React 或 Preact。

【解决方案7】：

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

如果您只是想打开一个从点击到“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。

【讨论】：

【解决方案8】：

这是作者Tips & Tricks博客文章中的工作代码，将其放入准备好的文档中：

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

这会触发当前显示的图像或内容的较小版本，就像您手动单击它一样。它避免了再次初始化 Fancybox，而是将您初始化它的参数保存在文档中。如果您需要在使用单独按钮打开框时与单击框相比做一些不同的事情，您将需要参数，但对于许多人来说，这将是他们想要的。

【讨论】：

【解决方案9】：

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

它对我有用..

【讨论】：

【解决方案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
                    });
                });
            }
...

【讨论】：

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

【解决方案11】：

如果 jQuery.fancybox.open 不可用（在 fancybox 1.3.4 上），您可能需要使用 semafor 来解决递归问题：

<a href="/index.html" onclick="return myfunction(this)">click me</a>

<script>

var clickSemafor = false;
myfunction(el)
{
 if (!clickSemafor) {
   clickSemafor = true; 
   return false; // do nothing here when in recursion
 }
 var e = jQuery(el); 
 e.fancybox({
    type: 'iframe',
    href: el.href
  }); 
 e.click();  // you could also use e.trigger('click');
 return false; // prevent default

}
</script>

【讨论】：