Galleriffic和放大鏡放大問題

Question

我正在使用兩個獨立運行的插件。 Galleriffic和Loupe是兩個插件。 我想做的是在Galleriffic中顯示大圖像，並放大懸停效果，這是Loupe的目的。 我不得不添加一行代碼newSlide.find('a img').addClass('magnifyPic'); 到Galleriffic插件以獲取圖像上的類，放大鏡應使用該類來激活放大效果。 以下是對插件的兩次調用。

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

搜索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/