画廊和放大镜放大问题

Question

我正在使用两个独立工作的插件。 Galleriffic 和 Loupe 是两个插件。我想要做的是让 Galleriffic 中的大图像也有放大悬停效果，这就是 Loupe 的用途。我必须在 Galleriffic 插件中添加一行代码newSlide.find('a img').addClass('magnifyPic');，以便在图像上获得一个类，Loupe 应该使用它来激活放大效果。以下是插件的两个调用。

jQuery(document).ready(function($) {

  var gallery = $('#thumbs').galleriffic({
       'imageContainerSel': '#bigPics',
       'enableBottomPager': false,
       'renderNavControls': false,
       'renderSSControls':  false,
       'enableHistory':     false,
  });

  $('.magnifyPic').loupe({
     'default_zoom': 300,
     'shape' : 'rounded',
     'default_size' : 160,
     'glossy' : false,
     'drop_shadow' : false 
  });

});

问题是当我将鼠标悬停在大图像上时，绝对没有任何反应。这两个插件独立地运行正常，但似乎不想一起工作。如果我理解正确的话，Galleriffic 插件可以在其选项中接受回调、函数等，所以我想我的问题是：如何将 Loupe 调用集成到 Gallerific 调用中？或者这是让 Loupe 仅使用 Galleriffic 画廊中的大图像的正确方法？我已经尝试删除、添加、修改这两个插件的代码行，但似乎无法让它们一起工作。

Answer 1

在 jquery.galleriffic.js 中搜索 image.src。它应该出现两次（在第 338 行和第 611 行附近）。在image.src = ...之后添加以下行：

image.src = ...
$(image).loupe();

注意：我还将它添加到我的 CSS 中。在添加此 CSS 规则之前，放大镜导致非常小的放大（也许我使用的插件错误？）：

​.loupe img {
  width:800px;
  height:800px;    
}​

我在 github 上发布了示例。你可以在这里试试http://ted-piotrowski.github.com/example-gallerific/