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/

Galleriffic和放大镜放大问题

1 个答案: