两个 easyzoom jquery 实例相互控制

Question

尝试设置 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'));
});

我的第一个实例是 .easyzoom，第二个实例是 .easyzoom2

一切都显示正确，但如果我 select 来自 easyzoom2 的缩略图，它会显示在 easyzoom

不知道我哪里出错了，任何帮助都会很棒！

Answer 1

您正在重复使用相同的变量名称 ($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'));
});

两个 easyzoom jquery 实例相互控制

two instances of easyzoom jquery controlling each other

css

jquery

zooming