从功能打开fancybox

2020/12/31 15:11 · jquery ·  · 0评论

我正在尝试从我拥有的功能中打开一个花哨框-简而言之,我的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);
});

基本演示(无图像)→

如果您只想在调用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方法”部分:

http://fancyapps.com/fancybox/

您根本不必添加自己的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打开该框处理程序。看一下HowTo部分。


以后,如果要以编程方式打开该框,请click在该元素上引发事件:

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

您不必触发click事件,可以将fancybox类型作为ajax来执行。  

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

使参数对象从扩展<a>,并open通过委托在click事件中使用fancybox的功能。

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

    });

答案似乎有点复杂。我希望我不要误解这个问题。

如果您只是想从单击到“ 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”的花式框。

这是作者的“提示与技巧”博客文章中的工作代码,将其放入文档中即可:

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

这会触发当前显示的图像或内容的较小版本,就像您手动单击一样。它避免了再次初始化Fancybox,而是保留了在文档上准备初始化它的参数。如果与单击框相比,用单独的按钮打开框时需要执行其他操作,则需要参数,但是对于许多人来说,这就是他们想要的。

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

如果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>
本文地址:http://jquery.askforanswer.com/conggongnengdakaifancybox.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!