CODEWITHSUNDEEP
javascripthtmlcss
parker
parker

Reputation: 265

zoom an image on button click

I have a code for an image that if you tap on it zooms out and if you tap on any where out side the box of the image it zooms back. is there I can control the zooming with a button such that one button zooms incrementally and the other zooms in decrementally. this is my attempt

<!DOCTYPE html>
<html >
<head> 
  <style type="text/css">
    .zoomin img { height: 200px; width: 200px;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease; }
    .zoomin img:hover { width: 300px; height: 300px; } 
  </style>
</head>
<body>
  <div class="zoomin"> 
     <img src="download.jpg" title="All you need to know about CSS Transitions " /> 
  </div>
</body>
</html> 
<button>plus</button>
<button>minus</button>

what better way could this be achieved

Upvotes: 0

Views: 15026

Answers (2)

Justinas
Justinas

Reputation: 43441

Simply change dimensions of image using .style.[width/height], css will do the rest:

function resize(direction) {
  var delta = 100 * direction;

  var element = document.getElementById('img');
  var positionInfo = element.getBoundingClientRect();

  element.style.width = positionInfo.width+delta+'px';
  element.style.height = positionInfo.height+delta+'px';
}
<!DOCTYPE html>
<html >
<head> 
  <style type="text/css">
    .zoomin img { height: 200px; width: 200px;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease; }
    .zoomin img:hover { width: 300px; height: 300px; } 
  </style>
</head>
<body>
  <div class="zoomin"> 
     <img src="download.jpg" id="img" title="All you need to know about CSS Transitions " /> 
  </div>
</body>
</html> 
<button onClick="resize(1)">plus</button>
<button onClick="resize(-1)">minus</button>

Upvotes: 1

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

This works, I've given each button a class, one plus and one minus, and have addClass and removeClass. An even easier way would be to have one button and use toggleClass to add and remove the class you already have for zoomin.

$('button.zoomPlus').click(function(){
  $('.zoomin img').addClass('zoomer');
});

$('button.zoomMinus').click(function(){
  $('.zoomin img').removeClass('zoomer');
});
.zoomin img { height: 200px; width: 200px;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease; }
    .zoomin img:hover,
    img.zoomer{ width: 300px; height: 300px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head> 
</head>
<body>
  <div class="zoomin"> 
     <img src="http://placehold.it/300x300" title="All you need to know about CSS Transitions " /> 
  </div>
</body>
</html> 
<button class="zoomPlus">plus</button>
<button class="zoomMinus">minus</button>

Upvotes: 0

Related Questions