okfocus / okzoom

Zoom.

okzoom

OKZoom by OKFocus

OKZoom is a jQuery plugin that produces a portable loupe of variable size and shape. All other jQuery ‘zoom’ plugins we have encountered implement a square magnifying area. Ours is a circle. You want a circle. See a demo here.

Usage

You can bind OKZoom to one or many image elements, producing a “zoom” effect like this:

With code like this:

$('img').okzoom({
  width: 200,
  height: 200,
  round: true,
  background: "#fff",
  backgroundRepeat: "repeat",
  shadow: "0 0 5px #000",
  border: "1px solid black"
});

Options

Usage
width	(in pixels}	150
height	(in pixels}	150
scaleWidth	optionally resize the loupe image	null
round	round loupe if true, square if false	true
background	color for image off the edge of the loupe	#fff
backgroundRepeat	repeat the image within the loupe	no-repeat
border	border around the loupe	0
shadow	box-shadow on the loupe	0 0 5px #000

Data Attribute

Typically, we use this plugin on an image that has been sized down in HTML, and the loupe displays the image at its normal size. If you like, you can add an HTML5 data attribute data-okimage to your image to substitute alternative content inside the loupe.

Run Tests

OKFocus tests JavaScript with Jasmine. Run tests:

$ bundle install
$ jasmine init
$ rake jasmine

okzoom's Issues

When used with dynamicaly generated tags, the loupe does not disaper on mouseout (solved)

Hi,

Found and solved the issue, the current version always add new "ok-loupe" and "ok-listener" divs, the following change will prevent this behavior and allow for the initializer to be called multiple times without creating unnecessary divs. The key is in looking for an already created Div by its id and having one div for each image that supports zooming.

$(function($){
$.fn.okzoom = function(options){
options = $.extend({}, $.fn.okzoom.defaults, options);

    return this.each(function() {
        var base = {};
        var el = this;
        base.options = options;
        base.$el = $(el);
        base.el = el;

        //Find a pre-existing element for 'ok-listener'
        base.listener = document.getElementById('ok-listener_' + this.id);
        base.$listener = $(base.listener);

        if (!base.listener) {
            base.listener = document.createElement('div');
            base.listener.id = "ok-listener_" + this.id;
            base.$listener = $(base.listener).addClass('ok-listener').css({
                position: 'absolute',
                zIndex: 10000
            });
            $('body').append(base.$listener);
            okListener = base.listener;
        }

        //Find a pre-existing element for 'ok-loupe'
        var loupe = document.getElementById('ok-loupe_' + this.id);

        if (!loupe) {
            loupe = document.createElement("div");
            loupe.id = "ok-loupe_" + this.id;
            loupe.style.position = "absolute";
            loupe.style.backgroundRepeat = "no-repeat";
            loupe.style.pointerEvents = "none";
            loupe.style.display = "none";
            loupe.style.zIndex = 7879;
            $('body').append(loupe);
            okLoupe = loupe;
        }
        base.loupe = loupe;

        base.$el.data("okzoom", base);

        base.options = options;
        $(base.el).bind('mouseover', (function(b) {
            return function(e) { $.fn.okzoom.build(b, e); };
        }(base)));

        base.$listener.bind('mousemove', (function(b) {
            return function(e) { $.fn.okzoom.mousemove(b, e); };
        }(base)));

        base.$listener.bind('mouseout', (function(b) {
            return function(e) { $.fn.okzoom.mouseout(b, e); };
        }(base)));

        base.options.height = base.options.height || base.options.width;

        base.image_from_data = base.$el.data("okimage");
        base.has_data_image = typeof base.image_from_data !== "undefined";

        if (base.has_data_image) {
            base.img = new Image ();
            base.img.src = base.image_from_data;
        }

        base.msie = -1; // Return value assumes failure.
        if (navigator.appName == 'Microsoft Internet Explorer') {
            var ua = navigator.userAgent;
            var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if (re.exec(ua) != null)
                base.msie = parseFloat(RegExp.$1);
        }
    });
};

$.fn.okzoom.defaults = {
    "width": 150,
    "height": null,
    "scaleWidth": null,
    "round": true,
    "background": "#fff",
    "backgroundRepeat": "no-repeat",
    "shadow": "0 0 5px #000",
    "border": 0
};

$.fn.okzoom.build = function(base, e){
    if (! base.has_data_image) {
        base.img = base.el;
    }
    else if (base.image_from_data != base.$el.attr('data-okimage')) {
        // data() returns cached values, whereas attr() returns from the dom.
        base.image_from_data = base.$el.attr('data-okimage');

        $(base.img).remove();
        base.img = new Image();
        base.img.src = base.image_from_data;
    }

    if (base.msie > -1 && base.msie < 9.0 && !base.img.naturalized) {
        var naturalize = function(img) {
            img = img || this;
            var io = new Image();

            io.el = img;
            io.src = img.src;

            img.naturalWidth = io.width;
            img.naturalHeight = io.height;
            img.naturalized = true;
        };
        if (base.img.complete) naturalize(base.img);
        else return;
    }

    base.offset = base.$el.offset();
    base.width = base.$el.width();
    base.height = base.$el.height();
    base.$listener.css({
        display: 'block',
        width: base.$el.outerWidth(),
        height: base.$el.outerHeight(),
        top: base.$el.offset().top,
        left: base.$el.offset().left
    });

    if (base.options.scaleWidth) {
        base.naturalWidth = base.options.scaleWidth;
        base.naturalHeight = Math.round( base.img.naturalHeight * base.options.scaleWidth / base.img.naturalWidth );
    } else {
        base.naturalWidth = base.img.naturalWidth;
        base.naturalHeight = base.img.naturalHeight;
    }

    base.widthRatio = base.naturalWidth / base.width;
    base.heightRatio = base.naturalHeight / base.height;

    base.loupe.style.width = base.options.width + "px";
    base.loupe.style.height = base.options.height + "px";
    base.loupe.style.border = base.options.border;
    base.loupe.style.background = base.options.background + " url(" + base.img.src + ")";
    base.loupe.style.backgroundRepeat = base.options.backgroundRepeat;
    base.loupe.style.backgroundSize = base.options.scaleWidth ?
    base.naturalWidth + "px " + base.naturalHeight + "px" : "auto";
    base.loupe.style.borderRadius =
        base.loupe.style.OBorderRadius =
            base.loupe.style.MozBorderRadius =
                base.loupe.style.WebkitBorderRadius = base.options.round ? base.options.width + "px" : 0;

    base.loupe.style.boxShadow = base.options.shadow;
    base.initialized = true;
    $.fn.okzoom.mousemove(base, e);
};

$.fn.okzoom.mousemove = function (base, e) {
    if (!base.initialized) return;
    var shimLeft = base.options.width / 2;
    var shimTop = base.options.height / 2;
    var pageX = typeof e.pageX !== 'undefined' ? e.pageX :
        (e.clientX + document.documentElement.scrollLeft);
    var pageY = typeof e.pageY !== 'undefined' ? e.pageY :
        (e.clientY + document.documentElement.scrollTop);
    var scaleLeft = -1 * Math.floor( (pageX - base.offset.left) * base.widthRatio - shimLeft );
    var scaleTop  = -1 * Math.floor( (pageY - base.offset.top) * base.heightRatio - shimTop );

    document.body.style.cursor = "none";
    base.loupe.style.display = "block";
    base.loupe.style.left = pageX - shimLeft + "px";
    base.loupe.style.top = pageY - shimTop + "px";
    base.loupe.style.backgroundPosition = scaleLeft + "px " + scaleTop + "px";
};

$.fn.okzoom.mouseout = function (base, e) {
    base.loupe.style.display = "none";
    base.loupe.style.background = "none";
    base.listener.style.display = "none";
    document.body.style.cursor = "auto";
};

});

iOS support

Any plans on supporting touch events?

Custom image for zoom or magnification level

Hi guys
Is there a way to select the amount of zoom on an image or even select a much larger image for the zoom?
Thanks

Prestashop integration

Hi there,
I'm new on Github and first of all thank you for this plugin !
I have an issue with the script when I load the page with the plugin.

Firebug report :
"ReferenceError: $ is not defined

$(function($){

okzoom.js (ligne 8)"

I'm not a javascript expert, I follow the step for integration and now I'm loose :)

Header.tpl :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="../themes/parallax/js/src/okzoom.js"></script>

product.js :
//add okzoom
$(function(){
$('#bigpic').okzoom({
width: 200,
height: 200,
border: "1px solid black",
shadow: "0 0 5px #000"
});
});

Any idea ?

Thanks!
ZiG

How do I change the magnification?

First off, thanks for making this library; its awesome.

Is is possible to change the default magnification of the loupe? The image I am trying to magnify is already displayed bigger than the image. When I run the loupe over the image, it actually makes it smaller rather than larger.

I looked for a way to just increase the magnification, but I couldn't find anything. Is there a way to do this?

Does not work on Popup

Hi

Okzoom works fine on pages but when opening an image in lightbox, it does not work ! http://bit.ly/1CYOslT

I have on $('#sk-lightbox-image img') but without success

Any help would be appreciated

how to switch off the lpe

How could be possible to 'switch off' the loupe effect?

test suite

Cannot read property 'msie' of undefined

Just wanted to let you know, getting this error when using the minified version in the repo, but not in the un-minified version.

onscroll

I have some problem. I use fullpage script and okzoom plugnin.
When i use onscroll even, i still can see zoom and look image.
I try fix and add code after 51:

base.$listener.bind('onscroll', (function(b) {
    return function(e) { $.fn.okzoom.onscroll(b, e); };
  }(base)));

And after 177:
$.fn.okzoom.onscroll = function (base, e) {
base.loupe.style.display = "none";
base.loupe.style.background = "none";
base.listener.style.display = "none";
document.body.style.cursor = "auto";
};

But it still no work. Please help me, how i can fix it?

p.s. also try use scroll among onscroll event.

add data parameter to set image that should be in lorgnette

i can see someone wanting this

TypeError: c.browser is undefined

Hi,

Get this error when I try to use OkZoom on an image.
Do you know how to fix it ? Or from where error can come ?

Thanks !

Ok Loupe Blocks Links

If the loupe is covering an image contained in an anchor tag, the anchor cannot be clicked.