Question

我无法拨打fancybox。业余问题。当我尝试使用fancybox iframe打开视频但最后一段代码没有时，下面的代码工作正常。我该如何解决？

<a href="javascript:;" data-href="MBHD0790-03" class="iframe" ">WORKS</a>

$(".iframe").fancybox({
  'width': 720,
  'height': 410,
  'type': 'iframe',
  'autoScale': false,
  'autoSize': false,
  'autoDimensions': false,
  'padding': 0,
  'beforeLoad' : function(){
    var url = $(this.element).data("href");
    this.href = baseURL+'assets/media-video/'+url+'.php';
  },
  'beforeShow': function(){
    $(window).on({
      'resize.iframe' : function(){
        $.fancybox.update();
      }
    });
  },
  'afterClose': function(){
    $(window).off('resize.iframe');
  }

});

当我使用上面的代码时，我的fancybox运行正常，但是当我尝试使用另一个函数调用时无效。

<a href="javascript:;" data-href="MBHD0790-03" onclick="vfancy(this)">DOESNT WORK</a>

function vfancy(){
  fancybox({
    'width': 720,
    'height': 410,
    'type': 'iframe',
    'autoScale': false,
    'autoSize': false,
    'autoDimensions': false,
    'padding': 0,
    'beforeLoad' : function(){
      var url = $(this.element).data("href");
      this.href = baseURL+'assets/media-video/'+url+'.php';
    },
    'beforeShow': function(){
      $(window).on({
        'resize.iframe' : function(){
          $.fancybox.update();
        }
      });
    },
    'afterClose': function(){
      $(window).off('resize.iframe');
    }
  });
};

Answer 1

您的第二个代码有两个基本问题：

1）。要以编程方式调用fancybox，您需要在jQuery范围内调用它，如：

function vfancy() {
    jQuery.fancybox({
        // API options
    });
};

...但你正在使用这个

function vfancy() {
    fancybox({
        // API options
    });
};

......这将永远不会奏效。

2）。请记住，您只能在任何fancybox中使用$(this.element) 回调如果您已将元素绑定到fancybox（通常为<a>元素）但在这种情况下，您在匿名函数中以编程方式调用fancybox，因此$(this.element)不在上下文中。

你要做的是：

A）。完全摆脱beforeLoad回调（什么都不做）

B）。调用data-href匿名函数的参数时，将vfancy属性的值传递给

<a data-href="MBHD0790-03" onclick="vfancy(this.getAttribute('data-href'))" href="javascript:;" >IT WORKS NOW</a>

C）。将href API选项添加到您的fancybox函数，并从传递给匿名函数的参数设置其值，如

function vfancy(url) {
    jQuery.fancybox({
        href: baseURL + 'assets/media-video/' + url + '.php',
        // other API options
    });
};

注意匿名函数需要接受参数（vfancy(url)）。如果您在下面添加更多选项，请注意href API选项后的逗号。

参见 JSFIDDLE

修改

您还可以在this属性中将onclick作为参数传递，如：

<a href="javascript:;" data-href="1_b.jpg" onclick="vfancy(this)">IT DOES WORK NOW</a>

...并在data-href函数中获取vfancy属性的值，如

function vfancy(url) { var url = url.getAttribute('data-href'); jQuery.fancybox({ href: baseURL + 'assets/media-video/' + url + '.php', // API options padding: 0 //, }); };

查看更新的 JSFIDDLE

Answer 2

您需要在对象上正确调用插件：

function vfancy(obj) {
    $(obj).fancybox({
        width: 720,
        height: 410,
        type: 'iframe',
        autoScale: false,
        autoSize: false,
        autoDimensions: false,
        padding: 0,
        beforeLoad: function () {
            var url = $(this.element).data("href");
            this.href = baseURL + 'assets/media-video/' + url + '.php';
        },
        beforeShow: function () {
            $(window).on({
                'resize.iframe': function () {
                    $.fancybox.update();
                }
            });
        },
        afterClose: function () {
            $(window).off('resize.iframe');
        }
    });
};

Fancybox问题有不同的调用方法

2 个答案: