0

I'm trying to create a draggable image using the jQuery plugin by Jack L Moore. However, when I attempt this, I get the following error:

TypeError: $(...).zoom is not a function

Below is the head of my website, which links to the CDN of the file. Then, in the actual body, I have the below, however presumably as it doesn't understand .zoom the problem lies with the code within <head>.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.20/jquery.zoom.js"></script>
  <script>
    $(document).ready(function() {
      $('#ex1').zoom();
      $('#ex2').zoom({
        on: 'grab'
      });
      $('#ex3').zoom({
        on: 'click'
      });
      $('#ex4').zoom({
        on: 'toggle'
      });
    });
  </script>
</head>
<body>
  <span class='zoom' id='ex1'>
    <img src='IMAGE_URL' width='555' height='320' alt='Daisy on the Ohoopee'/>
    <p>Hover</p>
  </span>
</body>
</html>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Sam Johnson
  • 742
  • 1
  • 8
  • 24
  • I try to paste your code in a html file, and it's working wit no errors. Maybe your host can't reach the coudflare CDN. – Bellu Jan 22 '18 at 10:48
  • snippet also seems to work without any errors. if you look in your network tab, does the zoom file get loaded? – Pete Jan 22 '18 at 10:49
  • @pete thanks - It's got a 304 in the network tab alongside the Zoom file. It also has that alongside the jQuery file despite that seemingly working. I'm just building the site locally for now, could that be a reason? – Sam Johnson Jan 22 '18 at 10:54
  • May be something to do with this: https://stackoverflow.com/questions/2603595/why-am-i-getting-304-not-modified-error-on-some-links-when-using-httpwebrequ, never had that error myself so not sure what would cause it – Pete Jan 22 '18 at 10:58
  • @pete Thanks - I decided to link to all the files within the site rather than link out to a CDN. The file is now showing as 200 in the Network tab, however, it is still showing the same error. – Sam Johnson Jan 22 '18 at 11:28

1 Answers1

0

In my case, this issue was caused by loading jQuery twice (Once manually in my <head>, the second by an option selected in a WP plugin). Removing the option from the plugin has now resolved the issue.

Sam Johnson
  • 742
  • 1
  • 8
  • 24