Image Zoom

by g30rg3

HTML

<img src='http://www.jimapco.com/wp-content/uploads/2012/07/USA-placemat-Front-VERSION-21.jpg'
class='img' />

CSS

.img {
    width:500px;
    height 325px;
}
.zoomWindow {
    position:absolute;
    overflow: hidden;
    border: 2px solid black;
}

JavaScript

(function ($) {
    $.Zoomable = function (el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("Zoomable", base);

        base.init = function () {
            if (typeof (options) === "undefined" || options === null) options = {};

            base.options = $.extend({}, $.Zoomable.defaultOptions, options);

            // Put your initialization code here
            switch (base.options.handler) {
                case "click":
                    base.$el.click(base.clickEventHandler);
                    break;
                case "hover": $el.click(base.clickEventHandler);
                    break;
            }

        };

        base.buildMag = function (origImg, pointPos) {
            var fullImg = $(document.createElement('img'));
            
            fullImg.attr('src', origImg.attr('src'));
            
            var smallSize = {
                w: origImg[0].width,
                h: origImg[0].height
                };
            
            var largeSize = {
               w: fullImg[0].width,
               h: fullImg[0].height
                };
                       
            var projectedPoint = {
                x: (pointPos.x / smallSize.w * 1.0) * (largeSize.w * 1.0),
                y: (pointPos.y / smallSize.h * 1.0) * (largeSize.h * 1.0)
                };
            
            var origPos = origImg.offset();
            
            var projectedPos = {
                top: (origImg[0].offsetTop - projectedPoint.y) + (base.options.magSize.h / 2),
                left: (origImg[0].offsetLeft - projectedPoint.x) + (base.options.magSize.w / 2)
                };
            
            //adjust full size image so that...