Fancybox 3 API - 未捕获的类型错误：无法读取未定义的属性“打开”答案

【问题标题】：Fancybox 3 API - Uncaught TypeError: cannot read property 'open' of undefinedFancybox 3 API - 未捕获的类型错误：无法读取未定义的属性“打开”
【发布时间】：2017-04-20 21:13:43
【问题描述】：

我正在尝试使用外部 JS 文件中的 javascript 将 fancybox 3 加载到我的 prestashop 产品图像中，但我在控制台中收到此错误：Uncaught TypeError: cannot read property 'open' of undefined.

我一直在本地测试此代码，它运行良好。

<a id="fancyboxlauncher" href="javascript:void(0)" >Click me</a>

Javascript

$('#fancyboxlauncher').on('click', function() {
'use strict';
  $.fancybox.open([
    {
      src  : '{$image.bySize.home_default.url}',
      opts : {
        caption : '{$product.description_short nofilter}'
      }
    }
  ], {
    loop : false,
    hash : "test"
  });

});

【问题讨论】：

标签： javascript prestashop fancybox-3

【解决方案1】：

请使用这个：

{literal}
$('#fancyboxlauncher').on('click', function() {
'use strict';
  $.fancybox([
    {
      src  : "{/literal}{$image.bySize.home_default.url}{literal}",
      opts : {
        caption : "{/literal}{$product.description_short nofilter}{literal}"
      }
    }
  ], {
    loop : false,
    hash : "test"
  });
});
{/literal}

【讨论】：

不要认为这是合适的解决方案，因为我是从外部 JS 文件加载这段代码
如何在你的外部 js 文件中使用它？你已经使用了 {$image} 这个 smarty 变量。 smarty 变量不能用于 javascript 文件。在这里，我看到您使用了 {$image} 变量，这就是我使用 {literal} 的原因。你能理解吗
对于 {$image}，我稍后会更改它，因为我正在尝试动态加载图像，主要问题是即使我添加了 $.noConflict()，js 也没有正确加载;它开始加载，但只有一次，然后我在控制台中得到同样的错误

【解决方案2】：

很明显，fancybox js 文件没有加载，因此$.fancybox 是undefined 并且错误消息显示cannot read property 'open' of undefined。

编辑：如果您想简单地启动其他图像组，您可以执行以下操作：

$('#fancyboxlauncher').on('click', function() {
    $('[data-fancybox="quick-view"]').eq(0).trigger('click');
});

【讨论】：

实际上当我使用这段代码时，fancybox 会自动加载 $.fancybox.open( { src : 'artisanat-sf.com/artisanat-sans-frontieres-3/103-large_default/…', } );
你是什么意思 - “自动加载”？您正在使用某种机制来按需加载 jQuery 插件使用的 JS 文件？如果是这样，那么这对你不起作用。
我的意思是我在我的前端控制器中加载这个 js，如果我不使用 .on('click' ... JS 将自动打开
那么，你有没有检查一下fancybox是否已经加载，例如，“$.fancybox”是一个对象？
是的，当我添加 $('#fancyboxlauncher').on('click', function() {});当我点击一个链接时启动fancybox，当我在简单的HTML文件中测试它时，这个脚本再次工作正常