我正在使用两个独立正常工作的插件。 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/
更多推荐
发布评论