0

我正在使用两个独立工作的插件。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 调用集成到 Gallerific 调用中？或者这是让 Loupe 只使用 Galleriffic 画廊中的大图像的正确方法？我已经尝试删除、添加、修改这两个插件的代码行，但似乎无法让它们一起工作。

4

1 回答 1

0

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

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

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

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

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

于 2012-11-29T02:49:31.913 回答