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 使用 Content-Disposition: Attachement 标头响应，脚本 /s/jqueryelevateZoom-308min.js 未加载。我想这就是 Squarespace 为 /s/ 文件夹中的资产设置的方式。以前不是这样，但现在似乎是这样。

2. on ready JQuery 事件可能不会在适当的时间触发。

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

4. 您应该定位该图像块 div 内的 img 元素，而不仅仅是图像块 div 本身。

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

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

<!-- Plugin elevateZoom -->
<script>
window.Squarespace.onInitialize(Y, function() {
// 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 -->

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