Implement jquery easyzoom like plugin in CakePhp3

Need Help
1

I want to implement jquery easyzoom plugin in my cakephp3 project. I have include the css and js files in webroot/css and webroot/js folders and added the plugin initialization script. But on hovering the smaller image it is not loading the zoomed image, rather keeps showing the notification “Loading high resolution image…” for ever.

How can I implement this plugin or is there any other way to get the same result in my cakephp 3.6 project?

2

Hi!
Can you please share more information on what you tried/what code you used and any errors you may be getting?

3

You can look for these errors in the Javascript console.

4

In my view.ctp file, I added the css

<?= $this->Html->css(['easyzoom']) ?>

Then added the html

Then at the end, I added the script

<?= $this->Html->script(['jquery.easyzoom-modified']) ?>

Note: Just to mention, jquery has been loaded in the main layout ctp file.
Problem: When I hover and/or move mouse over the image displayed by the tag, the zoom image is not getting loaded, rather it shows the “Loading high resolution image…” notification.

5

What version of jQuery do you have loaded?

6

using jquery-3.3.1.min.js

7

Odd…
Any errors in the Javascript console?