Creating a zoomed-in 'photographers loope' styled effect with jquery ui when dragging anything

Question

This is a tricky one.

Let's say with have something that you can drag with jquery ui's draggble.

When you're dragging it I want a loope to pop up with a zoomed in version of what's being dragged, so an exact view of what's happening, just zoomed in. So the user can precisely see what's happening.

A bit like it does on the phone keyboard, some picks below of an example.

enter image description here

Not really sure how to pull it off, maybe append the page with an iframe of the zoomed in current page cloned?

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

This is a possible duplicate of this question, based on Google's WorldFair doodle. Anurag explains:

there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.

The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.

Here's a sorta minimal reconstructed example.

Another example where we don't hide the div overflow to reveal the entire thing as a square.

An additional amazing demo available here, credit to author Hugo Darby-Brown at Codepen.

score 0 · Answer 2 · answered Mar 25 '14 at 08:37

You could try this out Fiddle. I used css for magnifying the content.

Javascript

$("div.timepass").draggable({
    cursor: "move",
    cursorAt: {
        top: 0,
        left: 0
    },
    start: function (e) {
        $(e.target).addClass("zoom-class");
    },
    stop: function (e) {
        $(e.target).removeClass("zoom-class");
    }
});

CSS

.timepass {
    background-color: #f3d3a3;
    width: 24px;
}

.zoom-class {
    -moz-transform: scale(3.0);
    -webkit-transform: scale(3.0);
}

HTML

<div class="timepass"><p>Lol</p></div>

No, I want a zoomed-in duplicate of the page in the looking glass above, not just the item zoomed in. That's really easy to do. — CafeHey, Mar 26 '14 at 19:23

score 0 · Answer 3 · answered Mar 31 '14 at 05:53

Check the following free and easy to use jQuery plugins to achieve the desired effects.

Magnifier.js : a Javascript library to enabling magnifying glass effect.

jQuery Magnifier Plugin : an jQuery plugin for zoom effect that makes use of Html5 canvas and CSS to create a magnifying glass.

mlens : a jQuery plugin simplifies creating magnifying glass effect.

Creating a zoomed-in 'photographers loope' styled effect with jquery ui when dragging anything

3 Answers3