initial values

[GrHound]

wheelzoom is great! A user wants to start with a zoomed-in version (e.g., centered, scale=2x) because there is a list of images and each of them would require mouse actions. I tried to fiddle around in the code, but it appears that the settings should be internally consistent, i.e., not tampered by anything other than the pan/zoom events. It is possible that this requires an artifical rescaling event after the full load of an image (?). A possible approach would be to add, for instance, 'initialzoom: 2.0' to the wheelzoom() second argument. Any advice is greatly appreciated.

[jackmoore]

I'm not sure if I want to add any new features to this project, but I did open it up to see how difficult it would be to do what you are asking about. I think I got it worked out. If you don't mind editing the source, try replacing the load function in it with this one:

function load() {
    if (img.src === cachedDataUrl) return;

    var computedStyle = window.getComputedStyle(img, null);

    width = parseInt(computedStyle.width, 10);
    height = parseInt(computedStyle.height, 10);
    bgWidth = width * 2;
    bgHeight = height * 2;
    bgPosX = -width / 2;
    bgPosY = -height / 2;

    setSrcToBackground(img);

    img.style.backgroundSize =  bgWidth+'px '+bgHeight+'px';
    img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
    img.addEventListener('wheelzoom.reset', reset);

    img.addEventListener('wheel', onwheel);
    img.addEventListener('mousedown', draggable);
}

[jackmoore]

I decided to go ahead and make it an option since it seems like such a minor thing.

Here's an example usage:

wheelzoom(document.querySelector('img.zoom2'), {initialZoom: 2});

For now I've only added an option for the zoom level and not for position.

[GrHound]

Great, it works exactly as needed! Thanks for the quick reply.