Menu icon Foundation
multizoom.js breaks foundation 6

I'm trying to add multizoom.js (https://www.jqueryscript.net/demo/jQuery-Featured-Image-Zoomer-Plugin-multizoom-js/) to a product page. However, when I add the script to my HTML page it breaks Foundation menu, breadcrumbs and product table. Loading the script before or after foundation loads doesn't seem to matter

Is there a way to avoid the 2 scripts from conflicting? I'm not a programmer so any help would be greatly appreciated. As an alternative, if anyone could recommend a similar image zoom that works like Demo #3 that would work too.

Thank you.

multizoom.jsfoundation 6javascript conflict

I'm trying to add multizoom.js (https://www.jqueryscript.net/demo/jQuery-Featured-Image-Zoomer-Plugin-multizoom-js/) to a product page. However, when I add the script to my HTML page it breaks Foundation menu, breadcrumbs and product table. Loading the script before or after foundation loads doesn't seem to matter

Is there a way to avoid the 2 scripts from conflicting? I'm not a programmer so any help would be greatly appreciated. As an alternative, if anyone could recommend a similar image zoom that works like Demo #3 that would work too.

Thank you.

Val Ery 11 months ago

Hi Tom!

I assume that you should also use jQuery Migrate Plugin (last update for multizoom.js was 6 years ago). Try it, if it does not work out, we'll think of something :)

Tom Hogan 11 months ago

Hi Val,

First, thanks for the time you took to respond to my problem and I apologize for the delay in getting back to you.

I added the jQuery Migrate Plugin you suggested without any success. As soon as I add multizoom.js, Foundation breaks.

I know multizoom is ancient by today's standard but it's ideal for what I'm trying to accomplish. I want to swap a product photo with a parts diagram that a customer can switch between and zoom around on. You can see what I'm taking about here:

http://www.sistemiklein.com/en/products/6-6--boring-bits-slot-mortising-bits/350-hl-reciprocating-slot-mortising-bits.html

I stumbled across this page and it's exactly what I'm trying to do. I took a peek at the page source and that's how I found multizoom.

I'm more than willing to use any solution similar to multizoom but haven't I haven't been able to find one.

I'm open to suggestions.

Kind Regards

 

 

 

Tom Hogan 11 months ago

 Val,

As a followup, when I add the following:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

My DEV Console shows: JQMIGRATE: Migrate is installed, version 1.4.1 with no errors and Foundation works fine.

When I add the multizoom script Foundation breaks and I receive the following errors:

Uncaught TypeError: $ is not a function

    at responsive-tables.js:1

(anonymous) @ responsive-tables.js:1

product.html:568 Uncaught TypeError: $ is not a function

    at product.html:568

(anonymous) @ product.html:568

The first Uncaught TypeError is from the first line of Foundation's responsive-tables.js and the second is from the following script I add just before the body tag close (</body>) to initialize foundation.js 

<script>

      $(document).foundation();

</script>