0

There is a wonderful script by Manos which allows you to pan a cropped image when hovering over it. Here is the code and here is a demo

What I would like to do is to place multiple images on 1 page with various sizes for each image. (I tried creating a JSfiddle for this but did not work well...)

I attempted to add more than 1 on a page, but each image mirrors the action and each instance needs to be the exact same size image or it can't calculate the proper panning.

Thanks very much in advance.

Chumtarou
  • 313
  • 5
  • 15

1 Answers1

1

Instead of using a global $imagePan modify the MouseMove function to accept the image in context, and instead of using id's you should be using classes.

http://jsfiddle.net/VPr52/9/

It still needs heavy optimization, calculating the widths and height each time the mouse moves, is too much, better to calculate it once and save it in the image using $.data.

Good luck!

guzart
  • 3,700
  • 28
  • 23
  • UberNeet this is brilliant - different size images works as well with your update which is terrific - thank you! I'll keep testing/optimizing away and post any updates for others - thanks very much! – Chumtarou Jan 08 '12 at 19:35