Блог

пытаюсь настроить 2 экземпляра easyZoom jquery (https://i-like-robots.github.io/EasyZoom /) и по какой-то причине работает только 1 экземпляр, но оба набора эскизов управляют первым экземпляром.

Мой JS выглядит следующим образом :

 // 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'));
});
  

Мой 1-й экземпляр — .easyzoom, а 2-й экземпляр — .easyzoom2

Все отображается правильно, но если я выбираю миниатюру из easyzoom2, она отображается в easyzoom

Понятия не имею, где я ошибся, любая помощь была бы отличной!

Вы повторно используете одно и то же имя переменной ( $easyzoom ), поэтому ваш второй экземпляр заменяет первый. Вы также применили прослушиватели событий ко ВСЕМ .thumbnails , а не к набору эскизов для вашего первого экземпляра easyzoom и другого для второго.

Я понятия не имею, как выглядит ваш HTML, но вам нужно убедиться, что каждый экземпляр easyzoom отличается.

 // 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'));
});