Magnifier.js Issue

by Prasad Gavande

HTML

<div>
    <a class="magnifier-thumb-wrapper" href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">
        <img id="thumb" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg">
    </a>
    <div class="magnifier-preview" id="preview" style="width: 400px; height: 600px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
</div>

CSS

.magnifier-thumb-wrapper {
    position: relative;
    display: block;
    top: 0;
    left: 0
}

.magnifier-lens {
    position: absolute;
    border: solid 1px #ccc;
    z-index: 1000;
    top: 0;
    left: 0;
    overflow: hidden
}

.magnifier-loader {
    position: absolute;
    top: 0;
    left: 0;
    border: solid 1px #ccc;
    color: #fff;
    text-align: center;
    background: transparent;
    background: rgba(50, 50, 50, 0.5);
    z-index: 1000;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)
}

.magnifier-loader-text {
    font: 13px Arial;
    margin-top: 10px
}

.magnifier-large {
    position: absolute;
    z-index: 100
}

.magnifier-preview {
    padding: 0;
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden
}

.magnifier-preview img {
    position: absolute;
    top: 0;
    left: 0
}

.opaque {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
}

.hidden {
    display: none
}

JavaScript

/*JS Magnifier2*/
/**
* Unifies event handling across browsers
*
* - Allows registering and unregistering of event handlers
* - Injects event object and involved DOM element to listener
*
* @author Mark Rolich <[email protected]>
*/
var Event = function () {
    "use strict";
    this.attach = function (evtName, element, listener, capture) {
        var evt         = '',
            useCapture  = (capture === undefined) ? true : capture,
            handler     = null;

        if (window.addEventListener === undefined) {
            evt = 'on' + evtName;
            handler = function (evt, listener) {
                element.attachEvent(evt, listener);
                return listener;
            };
        } else {
            evt = evtName;
            handler = function (evt, listener, useCapture) {
                element.addEventListener(evt, listener, useCapture);
                return listener;
            };
        }

        return handler.apply(element, [evt, function (ev) {
            var e   = ev || event,
                src = e.srcElement || e.target;

            listener(e, src);
        }, useCapture]);
    };

    this.detach = function (evtName, element, listener, capture) {
        var evt         = '',
            useCapture  = (capture === undefined) ? true : capture;

        if (window.removeEventListener === undefined) {
            evt = 'on' + evtName;
            element.detachEvent(evt, listener);
        } else {
            evt = evtName;
            element.removeEventListener(evt, listener, useCapture);
        }
    };

    this.stop = function (evt) {
        evt.cancelBubble = true;

        if (evt.stopPropagation) {
            evt.stopPropagation();
        }
    };

    this.prevent = function (evt) {
        if (evt.preventDefault) {
            evt.preventDefault();
        } else {
            evt.returnValue = false;
        }
    };
};
/**
* Magnifier.js is a Javascript library enabling magnifying glass effect...