CODEWITHSUNDEEP
javascriptjqueryhtmlcss
blackandorangecat
blackandorangecat

Reputation: 1344

Show and zoom image from center with jQuery

When a button is clicked I would like for an image to appear, zoom in (scale), zoom out, and then disappear. Here is what I have so far - it does part of what I want. The image does zoom in/out when the button is clicked, but it is doing so from the top left corner rather than the center where I would like.

Secondly, I would like for the image to be hidden until the button is clicked, but that is not working either. I tried setting the display initially to none, and then toggling a class to change the visibility on button click. No joy.

Can anyone point me in the right direction? Am I missing some little thing?

Thanks for the help.

//Function that centers in viewport
jQuery.fn.center = function() {
  this.css("position", "absolute");
  this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
  this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
  return this;
}

//Center
$("img").center()

//Zoom in / out
$("button").on("click", function() {
  $("img").addClass("visible").center().animate({height: "300px"}, 600).delay(100).animate({height: "100px"},600).removeClass("visible");
});
img {
  height: 100px;
	/* display:none; */

}

.visible{
  display: inline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Click Me!</button>

<img src='http://placeholder.pics/svg/300'>

Upvotes: 0

Views: 2709

Answers (3)

Alex Bieg
Alex Bieg

Reputation: 365

I think this should work for you.

//Function that centers in viewport
jQuery.fn.center = function() {
  this.css("position", "absolute");
  this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
  this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
  return this;
}

$("img").on('animationend', function(e) { 
    $("img").removeClass("big").css({"display": "none"});
  });

//Center
$("img").center()

//Zoom in / out
$("button").on("click", function() {
  $("img").addClass("big").css({"display": "initial"});
});
img {
  height: 100px;
  display: none;
}

.big {
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
    0%   {transform: scale(1,1);}
    50%  {transform: scale(2,2);}
    100% {transform: scale(1,1);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Click Me!</button>

<img src='http://placeholder.pics/svg/300'>

Upvotes: 2

Carlos Franco
Carlos Franco

Reputation: 210

The css position cause this effect. You can refactor this and change the animate like this:

//Function that centers in viewport
jQuery.fn.center = function() {
  this.css("position", "absolute");
  this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
  this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
  return this;
}

//Center
//$("img").center()

//Zoom in / out
$("button").on("click", function() {
  $("img").addClass("visible").animate({'zoom': 1.2  }, 600).delay(100);
  $("img").addClass("visible").animate({ 'zoom': 1}, 600);
});
img {
  height: 100px;
	/* display:none; */

}

.visible{
  display: inline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Click Me!</button>

<img src='http://placeholder.pics/svg/300'>

Upvotes: 0

kris_IV
kris_IV

Reputation: 2444

This solve your problem:

$("button").on("click", function() {
  $("img").addClass("visible").center().animate({height: "300px", margin: "-100px"}, 600).delay(100).animate({height: "100px", margin: "0px"},600).removeClass("visible");
});

If you change height you should also manage with margin. The easiest way is to count 50% of different between old size and new size, so (100 - 300) / 2 = -100

Upvotes: 2

Related Questions