Увеличить изображение, используя только одно изображение

Question

Я пытаюсь достичь очень простой цели - увеличить изображение. После некоторого поиска в сети кажется, что большинству js-скриптов требовалось два изображения (одно для размера миниатюры, а другое для размера с масштабированием). Мне интересно, если у меня есть только одно изображение, возможно ли достичь эффекта увеличения?

Я хочу добиться чего-то вроде этой ссылки jQuery ImageZoom только с одним изображением, конечно же, в бесплатной редакции.

Answer 1

Я недавно написал Magnifier.js, если вы не предоставите большое изображение, вместо этого будет использоваться миниатюра.

Answer 2

Вы можете использовать одно изображение для увеличения с помощью Magic Zoom - вы просто ссылаетесь на одно и то же большое изображение как в src, так и в href, и вы используете ширину и высоту, чтобы уменьшить изображение до желаемого вами размера.

Например:

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

Этот подход хорош, хотя и не рекомендуется, поскольку он создает задержку при загрузке большого изображения.

Вы можете использовать пробную версию Magic Zoom бесплатно, если не возражаете против сообщения, показанного в углу.

Answer 3

Для этого не нужно писать никаких сложных кодов, вам нужно только рассмотреть следующие шаги: 1. Создайте стеклянный элемент лупы и установите изображение, которое вы хотите увеличить как фоновое изображение, затем установите масштаб (1.5) или 2 для этого (вы должны учтите, что ваш стеклянный элемент может иметь значение 50px в 50px, а фоновое изображение - 500px в 500px, что помогает нам сделать трюк) 2. когда указатель мыши входит в графическое окно, лупа должна следовать за указателем, где jquery входит 3 Вы должны получить смещение указателя, а затем изменить фоновое положение стекла лупы одновременно. JQuery код будет что-то вроде этого

   $(".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})
})

и 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);
}

что mpboxpic - это ваше основное изображение, а zoombox - ваш html-тег в качестве лупы

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