Squarespace: Adding a jquery plugin on a blog post

Question

I'm trying to add the elevateZoom jquery plugin (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.

I've uploaded the plugin as a link and added it to my site's head via code injection.

I then called it on the page via a codeblock:

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

But it does not seem to be working. Any help would be much appreciated. Thanks!

Answer 1

It looks like have 4 potential problems working against you on this.

1. The script /s/jqueryelevateZoom-308min.js isn't loading due to Squarespace responding with the Content-Disposition: Attachement header. I suppose that is just how Squarespace is setup for assets in the /s/ folder. That didn't used to be the case, but it appears to be now.

2. The on ready JQuery event may not fire at the proper time.

3. The source image that will be zoomed may not be large enough, due to Squarespace's JavaScript-based dynamic image loader.

4. You should target the img element inside that image block div, not just the image block div itself.

To remedy all of those issues, do the following:

In the header code injection, replace the line <script src="/s/jqueryelevateZoom-308min.js"></script> with the actual contents of the jqueryelevateZoom-308min.js file, pasted between an opening and closing <script> tag. So it'd look like this:

<!-- Plugin elevateZoom -->
<script>
window.Squarespace.onInitialize(Y, function() {
// copy and paste contents of the script here
});
</script>
<!-- end Plugin elevateZoom -->

Then, add the following script below that.

<!-- 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 -->

Finally, remove the code from the code block that you previously added.