Question

我正在尝试使用外部JS文件中的javascript将fancybox 3加载到我的prestashop产品图片中，但我在我的控制台中收到此错误：未捕获的TypeError：无法读取未定义的属性“open”。

我一直在本地测试这个代码，它运行正常。

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

});

Answer 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}

Answer 2

很明显，fancybox js文件未加载，因此$.fancybox为undefined，错误消息显示为cannot read property 'open' of undefined。

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

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

Fancybox 3 API - 未捕获的TypeError：无法读取未定义的属性'open'

2 个答案: