Galleriffic和Loupe放大了问题

Question

我使用了两个独立正确工作的插件。Galleriffic和Loupe是两个插件。我想要做的是让Galleriffic中的大图像也有一个悬停放大的效果，这就是Loupe的作用。我不得不添加一行代码newSlide.find('a img').addClass('magnifyPic');到Galleriffic插件中，以便在图像上获得一个类，它应该被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调用集成到Galleriffic中？或者，这是让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/