Squarespace：在博客 post 上添加 jquery 插件

Question

我正在尝试添加 elevateZoom jquery 插件（https://www.elevateweb.co.uk/image-zoom/) to my site. I'm then trying to call it for a specific image on this page: https://www.meridianacademy.org/division3-humanities/2020/5/6/civil-rights-quilt。

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

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

<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 个潜在问题对您不利。

由于 Squarespace 使用 Content-Disposition: Attachement header 响应，脚本 /s/jqueryelevateZoom-308min.js 未加载。我想这就是 Squarespace 为 /s/ 文件夹中的资产设置的方式。过去不是这样，但现在似乎是这样了。
就绪 JQuery 事件可能不会在适当的时间触发。
由于 Squarespace 的 JavaScript-based 动态图像加载器，将要缩放的源图像可能不够大。
您应该定位图像块 div 内的 img 元素，而不仅仅是图像块 div 本身。

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

在 header 代码注入中，将 <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 -->

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

Squarespace：在博客 post 上添加 jquery 插件

Squarespace: Adding a jquery plugin on a blog post

jquery

jquery-plugins

squarespace