два экземпляра easyzoom jquery, контролирующих друг друга - PullRequest
Новая
       21

два экземпляра easyzoom jquery, контролирующих друг друга

0 голосов
/ 17 марта 2019

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

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

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

1 Ответ

1 голос
/ 17 марта 2019

Вы повторно используете одно и то же имя переменной ($easyzoom), поэтому ваш второй экземпляр заменяет первый.Вы также применили прослушиватели событий для ALL .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'));
});
...