image zoom

by karim79

HTML

<div>
<img class="magnify" src="http://i.ebayimg.com/00/$(KGrHqNHJB8E7y)zCyGiBP!vz+f-YQ~~_19.JPG"/>
</div>

JavaScript

/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify = {
    dsettings: {
        magnifyby: 2,
        //default increase factor of enlarged image
        duration: 500,
        //default duration of animation, in millisec
        imgopacity: 0.2 //opacify of original image when enlarged image overlays it
    },
    cursorcss: 'url(magnify.cur), -moz-zoom-in',
    //Value for CSS's 'cursor' attribute, added to original image
    zIndexcounter: 100,

    refreshoffsets: function($window, $target, warpshell) {
        var $offsets = $target.offset()
        var winattrs = {
            x: $window.scrollLeft(),
            y: $window.scrollTop(),
            w: $window.width(),
            h: $window.height()
        }
        warpshell.attrs.x = $offsets.left //update x position of original image relative to page
        warpshell.attrs.y = $offsets.top
        warpshell.newattrs.x = winattrs.x + winattrs.w / 2 - warpshell.newattrs.w / 2
        warpshell.newattrs.y = winattrs.y + winattrs.h / 2 - warpshell.newattrs.h / 2
        if (warpshell.newattrs.x < winattrs.x + 5) { //no space to the left?
            warpshell.newattrs.x = winattrs.x + 5
        }
        else if (warpshell.newattrs.x + warpshell.newattrs.w > winattrs.x + winattrs.w) { //no space to the right?
            warpshell.newattrs.x = winattrs.x + 5
        }
        if (warpshell.newattrs.y < winattrs.y + 5) { //no space at the top?
            warpshell.newattrs.y = winattrs.y + 5
        }
    },

    magnify: function($, $target, options) {
        var setting = {}...