Javascript 从函数中打开fancybox

我试图从我拥有的函数中打开一个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中无效——你知道我如何解决这个问题吗？我知道其中一个原因是触发另一个链接，但我希望另一个解决方案是可能的。

因为您正在使用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;
    });
});

然而，我并不认为有什么理由在单击时设置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);
});

---

您根本不必添加自己的

单击事件处理程序。只需使用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已经绑定了打开该框的
单击
处理程序


稍后，如果要以编程方式打开该框，请引发该元素上的
单击
事件：

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

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

如果你只是想打开一个从点击到“a”标签的奇特盒子。只需将html设置为

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

单击锚定标记时，将显示包含“contentdiv”的fancybox。
如果您想在调用javascript函数时打开fancybox。可能是在代码流中，而不是单击的结果。以下是您的操作方法：

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

这将使用“contentdiv”创建框并将其打开。
您需要的是：

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

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

使参数对象从
扩展而来，
并通过委托在点击事件中使用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);

    });

以下是作者博客文章中的工作代码，请将其放入文档中：

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

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

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

如果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>


var clickSemafor=false；
myfunction（el）
{
如果（！clickSemafor）{
单击semafor=true；
return false；//在递归中不执行任何操作
}
var e=jQuery（el）；
e、 幻想箱({
键入：“iframe”，
href:el.href
}); 
e、 click（）；//也可以使用e.trigger（'click'）；
返回false；//防止默认值
}

它对我很有用。
。。。
...
<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
                    });
                });
            }
...

...
if（$（“.img_文件[数据img]”）.length）{
var imgs_slider_img=[]；
$（“.img_文件[数据img]”）。每个（函数（i）{
imgs\u滑块\u img.push({
href:$（this.attr（'data-img'））
});
$（this.attr（'data-index-img'，i）；
}).在“点击”时，功能（e）{
e、 预防默认值（）；
$.fancybox.open（imgs\u滑块\u img{
索引：$（this.attr（'data-index-img'），
填充：0，
保证金：0，
“弹性”效应，
下一个效果：“弹性”，
maxWidth:'90%'，
最大高度：“90%”，
自动宽度：正确，
自动高度：真
});
});
}
...
这看起来不对。我不知道fancybox是如何处理的，但每次点击都会重新初始化fancybox。@Felix:是的，我以前从未使用过fancybox-我只是查看OP的代码。首先，我对我的输入错误感到抱歉-因为它只是更大代码的一部分。接下来，除非我在我的链接上单击两次，否则上述操作将不起作用。@keysersoze：正如Felix在他的回答中指出的，这是因为fancybox添加了自己的单击处理程序，这是fancybox显示所需的。在您提出建议的同时，我还通过以下代码
$（document）.ready（函数（）{myfunction（this，null，…）；$（'.link'）。每个（function（）{myfunction（this，'dosomething（'+this.id+'）；'，…）；'）；})
非常感谢您的帮助：）我没有按照您的建议做，fancybox文档也写了，原因是我需要更多的功能来运行，而不仅仅是打开fancybox-我的方法需要处理6个参数，例如窗口标题，formfield需要焦点和完整+关闭代码。我页面上的每个按钮都使用同一个窗口，但在fancybox中工作时，每个按钮也有单独的操作。因此，如果我的函数类似于函数initModal（target、titletarget、titlestring、focus、completecode、closecode）
我应该如何在我的不同按钮上使用它呢？但是Fancybox2是有效的，不像1.3.4那样bug满天飞。我今天在rails 3.2应用程序的版本1上浪费了3个bug，当时我本来可以投资19美元购买Fancybox2。请提供更多的代码信息，而不仅仅是代码示例。解释你做了什么，以及为什么这会回答问题n、 我相信
.delegate（）
已经不推荐使用了。我几年前就和jQuery离婚了。请迁移到React或Preact。
function myfunction(){
    $('.classname').fancybox().trigger('click'); 
}

...
<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
                    });
                });
            }
...