Bu yazımda Javascript kodları yazarak resmin üzerine gelince zoom yapma uygulaması yapacağız.
Bu uygulamanın en çok kullanıldığı yerler E-Ticaret siteleridir. Ürün detay sayfalarında bulunan resimlerin üzerine gelince yanında resmin yakınlaştırılmış halini gösterirler. Bizim yapacağımız uygulama da bunun aynısı olacak.
Kodlarımızı yazdıktan sonra uygulamamız şu şekilde olacak.
Gördüğünüz gibi soldaki çanta resminin üzerinde fare ile hareket ettiğimizde sağında bulunan alanda çanta resminin zoom halini görüyoruz.
Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.
Konuyu daha fazla uzatmadan resmin üzerine gelince zoom yapma kodlarına geçelim.
Html Zoom Yapma Kodları
|
1 2 3 4 5 6 |
<div class="image-zoom-container"> <img id="myimage" src="" /> <div id="myresult" class="image-zoom-result"></div> </div> |
⇒ img etiketinin src niteliğine kullanmak istediğiniz resmin Url‘ini yazmalısınız.
Css Zoom Yapma Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style> .image-zoom-container { position: relative; } .image-zoom-container #myimage { width: 300px; height: 300px; border: 1px solid #d4d4d4; } .image-zoom-container .image-zoom-result { border: 1px solid #d4d4d4; width: 300px; height: 300px; position: absolute; top: 0px; left: 350px; z-index: 2; } .image-zoom-container .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; width: 40px; height: 40px; } </style> |
⇒ Css kodları üzerinde değişiklik yaparak soldaki resmin bulunduğu alanın genişlik ve yükseklik değerini yada sağda resmin zoom halinin göründüğü alanın genişlik ve yükseklik değerini değiştirebilirsiniz.
⇒ Uygulamamızda her iki alanın da genişlik ve yükseklik değerine 300px verdim.
⇒ Sağdaki alanın left özelliğine 350px değeri vererek soldaki alandan 50px sağda olmasını sağladım. Soldaki alan 300px olduğu için aradaki fark kadar yani 50px kaydırmış oluyoruz.
⇒ Fareyi hareket ettirdiğinizde dikkat ederseniz bir kare de onunla birlikte hareket ediyor. Bu karenin genişlik ve yükseklik değerine ise 40px verdim.
Bu değerleri kendi tasarımlarınıza göre değiştirip uygun hale getirebilirsiniz.
JavaScript Zoom Yapma Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<script> //image zoom start function imageZoom(imgID, resultID) { var img, lens, result, cx, cy; img = document.getElementById(imgID); result = document.getElementById(resultID); //create lens lens = document.createElement("DIV"); lens.setAttribute("class", "img-zoom-lens"); //insert lens img.parentElement.insertBefore(lens, img); //calculate the ratio between result DIV and lens cx = result.offsetWidth / lens.offsetWidth; cy = result.offsetHeight / lens.offsetHeight; //set background properties for the result DIV result.style.backgroundImage = "url('" + img.src + "')"; result.style.backgroundSize = (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); img.addEventListener("mousemove", moveLens); //and also for touch screens lens.addEventListener("touchmove", moveLens); img.addEventListener("touchmove", moveLens); function moveLens(e) { 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); //calculate the position of the lens x = pos.x - (lens.offsetWidth / 2); y = pos.y - (lens.offsetHeight / 2); //prevent the lens from being positioned outside the image if (x > img.width - lens.offsetWidth) { x = img.width - lens.offsetWidth; } if (x < 0) { x = 0; } if (y > img.height - lens.offsetHeight) { y = img.height - lens.offsetHeight; } if (y < 0) { y = 0; } //set the position of the lens lens.style.left = x + "px"; lens.style.top = y + "px"; //display what the lens sees result.style.backgroundPosition = "-" + (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 images a = img.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; y = y - window.pageYOffset; return { x: x, y: y }; } } imageZoom("myimage", "myresult"); //image zoom end </script> |
Html, Css ve JavaScript kodları yazarak resmin üzerine gelince zoom yapımı bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
BOOTSTRAP 4 – IMAGES (RESİMLER)
Yeni bir yazımda görüşmek üzere.
merhaba, çok yararlı bir script. ufak bir ekleme yapmak istiyorum.
şimdi zoom yapılan sağdaki pencere, soldaki resmin üzerine gelince aktif olsun, normalde görünmesin. bu işlemi nasıl yapabiliriz.