Create multiple jQuery image pans on 1 page

Question

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.

Answer 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!