Galleriffic和放大镜放大问题(Galleriffic and Loupe Magnify Issue)

Galleriffic和放大镜放大问题(Galleriffic and Loupe Magnify Issue)

我正在使用两个独立正常工作的插件。 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画廊中的大图像的正确方法吗？ 我已经尝试删除，添加，修改两个插件的代码行，但似乎无法使它们一起工作。

I'm using two plugins which independently work correctly. Galleriffic and Loupe are the two plugins. What I'm trying to do is have the large image in Galleriffic also have a magnify on hover effect, which is what Loupe is for. I've had to add one line of code newSlide.find('a img').addClass('magnifyPic'); to the Galleriffic plugin in order to get a class on the image, which should be used by Loupe to activate the magnify effect. Below are the two calls for the plugins.

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

The problem is that absolutely nothing happens when I hover over the large image. Independently the two plugins function correctly, but don't seem to want to work together. If I understand it correctly, the Galleriffic plugin can take callback, functions, etc. in its options, so I guess my question is: How do I integrate the Loupe call into the Gallerific call? Or is that the correct way to go about making Loupe work with only the large image in a Galleriffic gallery? I've tried removing, adding, modifying lines of code to both plugins, but can't seem to get them to work together.

最满意答案

在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/

Search for image.src in jquery.galleriffic.js. It should appear twice (around line # 338 and # 611). Add the following line after image.src = ...:

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

Note: I also added this to my CSS. Before this adding this CSS rule, the loupe was causing very minor enlargement (maybe I am using the plugin wrong?):

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

I posted the example on github. You can try it out here http://ted-piotrowski.github.com/example-gallerific/