Konular

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

Easy Slider Jquery Plugin

Jquery ile yapılmış mükkemmel sliderlardan birisi Easy Slider

26,762 Okunma Henüz yorum yapılmamış 25/07/2011 22:43:59

Kapsayan Tagı Silmek unwrap()

Bazen SEO için tagları bir başka tag içerisine gömmek zorunda kalırız. Fakat daha sonra bu gömen kod başımıza bela olabilir. JQuery ile bundan unwrap ile kurtulabiliriz.

23,194 Okunma Henüz yorum yapılmamış 10/07/2011 04:55:07

Jquery Tab Menu Örneği

Çok güzel hazırlanmış bir Jquery Tab Menu Uygulaması

23,050 Okunma Henüz yorum yapılmamış 30/07/2011 21:16:35

Jquery ile Basit Bir Slider

Jquery kullanarak yapılmış basit bir slider örneği

21,473 Okunma Henüz yorum yapılmamış 25/07/2011 22:20:05

Jquery İle Resim Boyutlandırma

Bir IMG tagının içinde bulunduğu DIV tağına göre yeniden boyutlandırılması, sayfanın genişliğinin değişmesi sonuçları değiştirecektir.

20,569 Okunma Henüz yorum yapılmamış 10/07/2011 04:24:25

Jquery ile Resim Ortalamak

Bir DIV tagı ile sınırlandırılmış bir alana bir IMG tagını ortalayarak yerleştirmek

17,308 Okunma Henüz yorum yapılmamış 10/07/2011 04:23:28

JQuery Seçicilerini Kullanmak (JQuery Selectors)

Bir HTML nesnesini, bir CSS clasını, bir ID ye sahip elemanı veya bir name'e sahip form nesnesini seçip nasıl JQuery efekti verebiliriz?

16,790 Okunma Henüz yorum yapılmamış 15/01/2014 19:09:39

Yükleniyor...