jQuery функция масштабирования не работает при наведении изображения

Question

Я использую эту библиотеку: https://www.jacklmoore.com/zoom/
Добавлена ​​функция масштабирования при наведении на изображение. Я добавил библиотеку в свою тему и добавил код jQuery в мой файл js:

$(document).ready(function(){
    $('.head-image img').zoom();
});

Это HTML, в котором находится изображение:

<div class="head-image">
    <img src="<?php the_post_thumbnail_url('full'); ?>" class="img-fluid">
</div>

Когда я перемещаю изображение на веб-странице, ничего не меняется, но если я смотрю в инспекторе, я вижу, что добавлен класс zoomImg и CSS меняется, но я не вижу увеличения изображения.

Здесь URL веб-страницы: https://www.dev.ruitershopboxmeer.nl/paard/zadels-en-toebehoren/zadeldekjes/kingsland-zadeldekje-carin/

Кто-нибудь знает, почему изображение не масштабируется?

Спасибо за ваше время!

Answer 1

Сначала исправьте ошибку в начале страницы (сгенерирована строка 14 HTML)

<script>if(flycart_woo_discount_rules_strikeout_script_executed == undefined){jQuery( document ).ready( /* .... */

Это необходимо переместить в конец тела, чтобы избежать проблем

Далее, убедитесь, что вы включили JQuery и Zoom правильно (из демо)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='path/to/jquery.zoom.js'></script>

Импортированный JQuery - это 3.4.1, и я не уверен, что Zoom все еще совместим с ним, так как демо использовало 1.10 0,2.