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.
<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>
<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
