two instances of easyzoom jquery controlling each other

Question

trying to setup 2 instances of easyZoom jquery (https://i-like-robots.github.io/EasyZoom/) and for some reason, only 1 instance is working, but both sets of thumbnails control the 1st instance.

My JS is as follows :

// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
  var $this = $(this);
  e.preventDefault();
  // Use EasyZoom's `swap` method
  api1.swap($this.data('standard'), $this.attr('href'));
});

// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom2').easyZoom();
// Setup thumbnails example
var api2 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
  var $this = $(this);
  e.preventDefault();
  // Use EasyZoom's `swap` method
  api2.swap($this.data('standard'), $this.attr('href'));
});

My 1st instance is .easyzoom and the 2nd instance, .easyzoom2

Everything displays correctly, but if i select a thumbnail from easyzoom2 it displays in easyzoom

No idea where ive gone wrong, any help would be great!

Answer 1

You're reusing the same variable name ($easyzoom) so your second instance replaces the first. You've also applied the event listeners to ALL .thumbnails rather than a set of thumbnails for your first easyzoom instance and another for the second.

I've no idea what your HTML looks like but you need to ensure that each easyzoom instance in distinct.

// Instantiate EasyZoom instances
var $easyzoom1 = $('.easyzoom1').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom1.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.easyzoom1 .thumbnails').on('click', 'a', function(e) {
    var $this = $(this);
    e.preventDefault();
    // Use EasyZoom's `swap` method
    api1.swap($this.data('standard'), $this.attr('href'));
});

// Instantiate EasyZoom instances
var $easyzoom2 = $('.easyzoom2').easyZoom();
// Setup thumbnails example
var api2 = $easyzoom2.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.easyzoom2 .thumbnails').on('click', 'a', function(e) {
    var $this = $(this);
    e.preventDefault();
    // Use EasyZoom's `swap` method
    api2.swap($this.data('standard'), $this.attr('href'));
});