Squarespace：在博客文章上添加jquery插件

Question

我正在尝试将elevateZoom jQuery插件（https://www.elevateweb.co.uk/image-zoom/）添加到我的网站。然后，我试图在此页面上为特定图像调用它：https://www.meridianacademy.org/division3-humanities/2020/5/6/civil-rights-quilt。

我已将该插件作为链接上传，并通过代码注入将其添加到我网站的头部。

然后我通过代码块在页面上将其调用：

<script>
$(document).on('ready', function () {
    $("#block-yui_3_17_2_1_1588791147485_100779").elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
   }); 
});
</script>

但是它似乎不起作用。任何帮助将非常感激。谢谢！

Answer 1

看来在这方面有4个潜在问题对您不利。

1. 由于Squarespace响应/s/jqueryelevateZoom-308min.js标头，因此未加载脚本Content-Disposition: Attachement。我想这就是在/ s /文件夹中为资产设置Squarespace的方式。过去并非如此，但现在看来。

2. 准备就绪的JQuery事件可能无法在适当的时间触发。

3. 由于Squarespace基于JavaScript的动态图像加载器，要缩放的源图像可能不够大。

4. 您应该将图像块div中的img元素作为目标，而不仅仅是图像块div本身。

要解决所有这些问题，请执行以下操作：

在标题代码注入中，将行<script src="/s/jqueryelevateZoom-308min.js"></script>替换为jqueryelevateZoom-308min.js文件的实际内容，并粘贴在开始和结束<script>标签之间。所以看起来像这样：

<!-- Plugin elevateZoom -->
<script>
// copy and paste contents of the script here
</script>
<!-- end Plugin elevateZoom -->

然后，在下面添加以下脚本。

<!-- Initialize elevateZoom -->
<script>
window.Squarespace.onInitialize(Y, function() {
  var eZImgs = [
    {
      selector: "#block-yui_3_17_2_1_1588791147485_100779 img",
      settings: {
        zoomType: "inner",
        cursor: "crosshair",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 750
      }
    } // Add more comma-separated objects after this object to init elevateZoom on other images on the site.
  ];
  var i = eZImgs.length;
  var el;
  while (i--) {
    el = $(eZImgs[i].selector);
    if (el) {
      el.attr("src", el.attr("src").replace(/\?format\=.*w$/, "?format=original"));  // Load the original image, not the dynamically-loaded, smaller image.
      el.elevateZoom(eZImgs[i].settings);
    }
  }
});
<script>
<!-- end initialize elevateZoom -->

最后，从以前添加的代码块中删除代码。