0

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.

AndyWarren
  • 1,993
  • 1
  • 20
  • 33

1 Answers1

0

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/

teddybeard
  • 1,964
  • 1
  • 12
  • 14
  • Teddybeard thanks for the reply. This has stumped me for several hours. It seems to partially work, I am now getting the magnify on hover effect, but the magnifying glass flashes in and out. Did you experience this at all? Line 338 and 611 were spot on so you did in fact use the correct plugin. Both areas in the plugin code now have `image.src = imageData.slideUrl; $(image).loupe();`. Is that correct? What would cause the magnifying glass to flash in and out? Here is the URL to the site in progress if that helps at all: http://dev04.iridiangroup.com/tmgauctionservices/single.html – AndyWarren Nov 29 '12 at 14:30
  • 1
    @AndyWarren does my example on github have this behavior? If yes, what browser are you using? It worked well in Chrome. I visited your website, however, loupe was not enabled in your gallerific-fancy.js so I could not see the effect. – teddybeard Nov 29 '12 at 19:25
  • Your example works perfectly. I've tested in Firefox and Chrome. I am working in Firefox though. I have a different version of Galleriffic running on that page now, one that has fancybox integrated with it. Sorry about that. I'll put the correct version back for you to see real quick. On a side note, galleriffic is a major pain in the butt when trying to integrate other plugins with it, can't get fancybox to work either. But one issue at a time! Thanks again. The correct Galleriffic is now on there for you to see. – AndyWarren Nov 29 '12 at 20:00
  • 1
    @AndyWarren You are right. There is definitely a problem in Firefox. It is hard for me to debug without having access to the code. I think the main problem you are facing is that jQuery plugins tend to alter the DOM (wrap an image in some extra
    tags, etc). When you use multiple plugins on the same elements, they are probably overwriting each others changes or altering the DOM in a way the other plugins don't expect. I would try to find one plugin that does what you need, otherwise you may have to sacrifice some functionality. Best of luck!
     – teddybeard Nov 29 '12 at 20:15
  • I just double checked Chrome, and it actually is working in there on my end as well. I appreciate the help and time taken to look at it. Your answer is close enough for me, thanks again. – AndyWarren Nov 29 '12 at 20:20
  • Sorry I couldn't help out more. The site looks great. Good luck! – teddybeard Nov 29 '12 at 22:48