javascriptjqueryloupegalleriffic

Galleriffic and Loupe Magnify Issue

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.

Solution

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