0

独立して正しく動作する2つのプラグインを使用しています。GallerifficとLoupeは2つのプラグインです。私がやろうとしているのは、ガレリフィックの大きな画像にホバー効果を拡大することです。これがルーペの目的です。画像のクラスを取得するには、Gallerifficプラグインに1行のコードを追加するnewSlide.find('a img').addClass('magnifyPic');必要がありました。これは、拡大効果をアクティブにするためにLoupeが使用する必要があります。以下は、プラグインの2つの呼び出しです。

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 
  });

});

問題は、大きな画像にカーソルを合わせてもまったく何も起こらないことです。独立して2つのプラグインは正しく機能しますが、一緒に動作したくないようです。私がそれを正しく理解していれば、Gallerifficプラグインはそのオプションでコールバック、関数などを受け取ることができるので、私の質問は次のとおりだと思います：Loupe呼び出しをGallerific呼び出しに統合するにはどうすればよいですか？それとも、ガレリフィックギャラリーの大きな画像だけでルーペを機能させる正しい方法ですか？両方のプラグインのコード行を削除、追加、変更しようとしましたが、それらを連携させることができないようです。

4

1 に答える 1

0

image.srcjquery.galleriffic.jsで検索します。2回表示されるはずです（行＃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 に答える