I am working on a project in which there is an image when user clicks on image the image zoom in and when click again the image zoom out. How can I make a zoom out feature in my code here
function resizeImg (img) {
var scale = 150/100;
var pos = $(img).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(img).parent().get(0);
$(img).css({
width: img.width*scale,
height: img.height*scale
});
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
You dont need a lot of javascript here..just some good CSS as shown here: http://jsfiddle.net/95wqh/10/
JS:
$('.image').on('click', function () {
$(this).toggleClass('zoom');
});
css:
#Container {
position:relative;
overflow:auto;
}
.zoom{
-webkit-transform : scale(1.5);
transform: scale(1.5);
}
Try and see if the below code helps you. Demo
EDIT: Just in-case you want to do this on multiple images in same page.
var zoom = "in";
$('.image').on('click', function () {
this.zoom = (this.zoom == "in") ? "out" : "in";
console.log(this.zoom);
resizeImg(this);
});
function resizeImg (img) {
var scale = 150/100;
var pos = $(img).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(img).parent().get(0);
if(img.zoom == "in"){
$(img).css({
width: img.width*scale,
height: img.height*scale
});
}
else if (img.zoom == "out"){
$(img).css({
width: img.width/scale,
height: img.height/scale
});
}
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
DEMO Works with multiple images
$('img').attr('zoom', 0);
$('.image').on('click', function () {
resizeImg(this);
});
function resizeImg(img) {
var zoom = $(img).attr('zoom');
if (zoom == 0) {
var scale = 150 / 100;
var pos = $(img).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(img).parent().get(0);
$(img).css({
width: img.width * scale,
height: img.height * scale
}).attr('zoom', 1);
container.scrollLeft = ($(container).width() / -2) + clickX * scale;
container.scrollTop = ($(container).height() / -2) + clickY * scale;
}else{
$(img).attr('zoom',0).attr('style','');
}
}
setting zoom
attribute = 0 for all the images --> $('img').attr('zoom', 0);
if zoom
attribute is set to 0
we will make zoom
effect and set attribute zoom=1
else zoom
attribute is set to 1
that is already zoomed we set the attribute zoom=0
and style
attribute is removed to get the image back to normal.
If you have multiple images this might also help you
JSfiddle: http://jsfiddle.net/95wqh/14/
JS code:
$('.image').on('click', function () {
if (typeof this.toggleZoom === "undefined") this.toggleZoom = false;
this.toggleZoom = !this.toggleZoom;
resizeImg(this);
});
function resizeImg(img) {
var scale = (img.toggleZoom) ? 150 / 100 : 100 / 150;
console.log(scale);
var pos = $(img).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(img).parent().get(0);
$(img).css({
width: img.width * scale,
height: img.height * scale
});
container.scrollLeft = ($(container).width() / -2) + clickX * scale;
container.scrollTop = ($(container).height() / -2) + clickY * scale;
}
if (typeof this.toggleZoom === "undefined") this.toggleZoom = false;
this.toggleZoom = !this.toggleZoom;
and
var scale = (img.toggleZoom) ? 150 / 100 : 100 / 150;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.