JQuery ile Yapılmış Basit Image Zoom Örneği

Resmin üzerine gelince yan pencerede resmin zoom yapılması işlemi. w3school uygulamasının geliştirilmiş halidir.

JQuery ile Yapılmış Basit Image Zoom Örneği

<html>
<head>

<script type="text/javascript">
      //Kullanimi
    //zoom resmi data-buyukResim alanına belirtiyliyor, belirtilmezse orjinal resim büyütülüyor

    //<img id="myimage" src="/html/arkaplanlar/10.jpg" data-buyukResim="/html/arkaplanlar/11.jpg" width="300" height="540" alt="Girl" >
    //Zoom alanı resim idsi sonuna Zoom eklenerek belirtiliyor
    //<div id="myimageZoom" class="img-zoom-result"></div>
   
    //Fonksiyondaki 3 parametresi büyük resmin yatay genişliğinin orjinal resim genişliğinin kaç katı olacağını belirtir.
    //imageZoom("myimage", 3);

    function imageZoom(imgID, BuyukResimOrani) {
        var img, lens, result, cx, cy, BuyukResimYolu;
        //img = document.getElementById(imgID);

        BuyukResimOrani = BuyukResimOrani || 1;
        img = $("#" + imgID); //alert(img.src());

        BuyukResimYolu = (img.attr("data-buyukResim")) ? img.attr("data-buyukResim") : img.attr('src');
        //alert(BuyukResimYolu);
        //result = document.getElementById(resultID);
        result = $("#" + imgID + "Zoom");
        result.css({"width": img.width() * BuyukResimOrani + "px", "height": img.height() + "px", "position": "absolute", "left": img.width() + 10 + "px", "top": "0"});
        /* Create lens: */
        //lens = document.createElement("DIV");
        lens = $('<DIV>', {
            class: 'img-zoom-lens'
        });
        //lens.setAttribute("class", "img-zoom-lens");
        /* Insert lens: */
        //img.parentElement.insertBefore(lens, img);
        lens.insertBefore(img);
        //img.parent().insertBefore(lens, img);
        /* Calculate the ratio between result DIV and lens: */
        //cx = result.offsetWidth / lens.offsetWidth;
        cx = result.outerWidth() / lens.outerWidth();
        //cy = result.offsetHeight / lens.offsetHeight;
        cy = result.outerHeight() / lens.outerHeight();
        /* Set background properties for the result DIV */
        //result.style.backgroundImage = "url('" + img.attr('src') + "')";
        result.css('background-image', "url('" + BuyukResimYolu + "')");
        //result.style.backgroundSize = (img.width() * cx) + "px " + (img.height() * cy) + "px";
        //result.css('url', img.attr('src'));
        result.css('background-size', (img.width() * cx) + "px " + (img.height() * cy) + "px");
        /* Execute a function when someone moves the cursor over the image, or the lens: */
        //lens.addEventListener("mousemove", moveLens);
        lens.on("mousemove", function (e) {
            moveLens(e);
        });
        //img.addEventListener("mousemove", moveLens);
        img.on("mousemove", function (e) {
            moveLens(e);
        });
        /* And also for touch screens: */
        //lens.addEventListener("touchmove", moveLens);
        lens.on("touchmove", function (e) {
            moveLens(e);
        });
        //img.addEventListener("touchmove", moveLens);
        img.on("touchmove", function (e) {
            moveLens(e);
        });

        //img.on("mouseleave", function(){Gizle();});
        img.mouseenter(function () {
            Goster();
        }).mouseleave(function () {
            Gizle();
        });
        lens.mouseenter(function () {
            Goster();
        }).mouseleave(function () {
            Gizle();
        });

        function moveLens(e) {

            //$("#" + resultID).removeClass('d-none');
            var pos, x, y;
            /* Prevent any other actions that may occur when moving over the image */
            e.preventDefault();
            /* Get the cursor's x and y positions: */
            pos = getCursorPos(e);

            //$("#Yaz").html(pos.x + " " + pos.y);

            /* Calculate the position of the lens: */
            x = pos.x - (lens.outerWidth() / 2);

            //$("#Yaz").html(x + " " + y);

            //$("#Yaz").html(pos.y + " " + (lens.outerHeight() / 2));
            y = pos.y - (lens.outerHeight() / 2);


            //$("#Yaz").html("x: " + x + " y: " + y);

            /* Prevent the lens from being positioned outside the image: */
            /*if (x > img.width - lens.offsetWidth) {
             x = img.width - lens.offsetWidth;
             }*/


            //$("#Yaz").html(img.width() + " " + lens.outerWidth());

            if (x > img.width() - lens.outerWidth()) {
                x = img.width() - lens.outerWidth();
            } else if (x < 0) {
               x = 0;
           }

           /*if (y > img.height - lens.offsetHeight) {
             y = img.height - lens.offsetHeight;
             }*/


            //$("#Yaz2").html(y + " > " +img.height() + "- " + lens.outerHeight() + " " + lens.outerHeight(true) + " " +lens.offsetHeight);

            if (y > img.height() + 1 - lens.outerHeight()) {
                y = img.height() + 1 - lens.outerHeight();
            } else if (y < 0) {
               y = 0;
           }

           /* Set the position of the lens: */
           //lens.style.left = x + "px";
           lens.css('left', x + "px");
           //lens.style.top = y + "px";
           lens.css('top', y + "px");
           //$("#Yaz2").html(x + "px" + y + "px");
           /* Display what the lens "sees": */
           //result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
           //$("#Yaz").html("background-position : -" + (x * cx) + "px -" + (y * cy) + "px");
           result.css("background-position", "-" + (x * cx) + "px -" + (y * cy) + "px");
       }

       function getCursorPos(e) {
           var a, x = 0, y = 0;
           e = e || window.event;
           /* Get the x and y positions of the image: */
           //a = img.getBoundingClientRect();
           a = img.get(0).getBoundingClientRect();
           /* Calculate the cursor's x and y coordinates, relative to the image: */
           x = e.pageX - a.left;
           y = e.pageY - a.top;
           /* Consider any page scrolling: */
           x = x - window.pageXOffset;
           //x = x - $(window).scrollLeft();
           y = y - window.pageYOffset;
           //y = y - $(window).scrollTop();

           return {
               x: x,
               y: y
           };
       }
       function Gizle() {
           result.css("display", "none");
           lens.css("display", "none");
       }
       function Goster() {
           result.css("display", "block");
           lens.css("display", "block");
       }
   }
</script>
<style>

* {
        box-sizing: border-box;
    }

    .img-zoom-container {
        position: relative;
        left:300px;
    }

    /*.img-zoom-lens {
        position: absolute;
        border: 1px solid #d4d4d4;
        /*set the size of the lens:*/
/*
        width: 40px;
        height: 40px;
    }*/

   
    .img-zoom-lens {
        position: absolute;
        background-color:rgba(255,255,255, 0.1);
        border: 1px solid #d4d4d4;
        width: 80px;
        height: 80px;
    }

    .img-zoom-result {
        border: 1px solid #d4d4d4;
        z-index: 10000;
        /*set the size of the result div:*/
        /*width: 300px;
        height: 300px;*/

    }

</style>
</head>

<body>
    <div class="img-zoom-container">
        <img id="myimage" src="/html/arkaplanlar/10.jpg" width="300" height="540" alt="Girl" >
        <div id="myimageZoom" class="img-zoom-result"></div>
    </div>

    <script>
        imageZoom("myimage", 3);
    </script>
</body>
</html>


 

 

 

Yorumunuzu Ekleyin

Yükleniyor...