javascript - Fancybox 的调用方法不同的问题

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) 回调 如果您已将元素绑定(bind)到 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