Magnify image using only one image

Question

I'm trying to achieve a very simple objective which is to magnify an image. After some searching on the net, it seems like most of the js scripts out there required two image ( one for thumbnail size and another one for zoom-ed size). I'm wondering if I am only having one image, is it still possible to achieve the zoom effect?

I wish to achieve something like this link jQuery ImageZoom with only one image, of course, in a free edition.

Answer 1

I've recently wrote Magnifier.js, if you don't provide the large image the thumbnail will be used instead

Answer 2

You can use one image to zoom with Magic Zoom - you just reference the same large image in both the src and the href and you use width and height to force the img smaller to the size you want.

For example:

<a href="your-big-image.jpg" class="MagicZoom"><img src="your-big-image.jpg" width="300" height="150"></a>

This approach is fine, though it isn't recommended because it creates a delay while the large image downloads.

You can use the trial version of Magic Zoom free of charge if you don't mind the message shown in the corner.

Answer 3

there is not any complex codes to be written for this purpose you only need consider these steps 1.create magnifier glass element and set the image that you want to be magnified as background image then set scale(1.5) or 2 for that(you should consider that your glass element can be say 50px in 50px while your background image is 500px in 500px that is help us do the trick) 2.when your mouse pointer come in picture box the magnifier glass should pursue the pointer thats where jquery come in 3.you should get offset of the pointer then change the background-position of the magnifier glass at same time. jquery code would be something like this

   $(".mpboxpic").mouseenter(function () {
    $("#zoombox").css({ "background": "url('" + $(this).attr("src") + "') no-repeat" })
    //با این کد تصویر پس زمینه دارای سایز یکسانی خواهد شد
    $("#zoombox").css({ "background-size": $(this).width() + "px " + $(this).height() + "px" })
}).mouseleave(function () {
    $("#zoombox").hide()
    var tg = $("#zoombox").css("background-image")
    px = 0;
    py = 0;
})
$(".mpboxpic").mousemove(function (p) {
    if (px==0) {
        $("#zoombox").fadeIn(200)
    }
    //با کد های زیر  مرکز دایره دقیقا در زیر موس قرار میگیرد
     px = p.pageX-$("#zoombox").height()/2
     py = p.pageY - $("#zoombox").width() / 2    
    $("#zoombox").css({ "top": py + "px", "left": px + "px", "position": "absolute" });
    var my = p.pageY - ($(this).offset().top + $("#zoombox").height() / 4)
    var mx = p.pageX - ($(this).offset().left + $("#zoombox").width() / 4)
    var coord = "-" + mx + "px " + " -" + my + "px"
    $("#zoombox").css({"background-position":coord})
})

and css

    #zoombox{
display:none;
position:absolute;
border:5px solid rgba(248, 243, 243, 0.72);
top:25%;
left:25%;
z-index:5;
height:50px;
width:50px;
border-radius:100px;
pointer-events:none;
transform:scale(2);
}

that mpboxpic is your main picture and zoombox is your html tag as magnifier glass

<div id="zoombox">
</div>