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.

Yes, using canvas. But it will not look as good as if you had 2 images. — Chad, Sep 20 '13 at 03:20
@Mahan: It still require two images. Please read my description and understand my objective. — SuicideSheep, Sep 20 '13 at 03:29
@IsaacLem From the page that Mahan linked: "The zoom works with either one or two images." — Chad, Sep 20 '13 at 13:58
@Chad: You can try by referring both image to the same source `images/large/image1.jpg`, the javascript magnifier will not appear. — SuicideSheep, Sep 21 '13 at 07:23

score 3 · Accepted Answer · answered Nov 07 '13 at 12:08

3

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

answered Nov 07 '13 at 12:08

Mark Rolich

101
2

score 0 · Answer 2 · answered Sep 20 '13 at 11:54

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.

It will be for commercial use and hence the client will really mind about any extra message. Of course, I believe it can be done without paying a single penny ;) — SuicideSheep, Sep 21 '13 at 07:52

Abolfazl · Answer 3 · 2016-04-20T06:18:33.693

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>

Magnify image using only one image

3 Answers3