jQuery addClass example

Change class name on click in jQuery

by moshfeu

HTML

<div class="gallery-item-wrap">
  <figure class="zoom">
    <img src="https://picsum.photos/id/1040/1800/1000">
  </figure>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.gallery-item-wrap {
  width: 70vw;
  margin: 0 auto;
}

figure {
  margin: 0;
}

figure img {
  width: 100%;
  height: auto;
}

figure.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow: hidden;
}

figure.zoomed img {
  transform: scale(2);
}

JavaScript

$('.zoom').click(function (e) {
	$(this).toggleClass('zoomed');
  move(e, $(this));
  console.log('moved');
});

$('.zoom')
.on('mousemove', function(e){
  move(e, $(this));
})

function move(e, elm) {
	elm.children('.zoom img').css({'transform-origin': ((e.pageX - elm.offset().left) / elm.width()) * 100 + '% ' + ((e.pageY - elm.offset().top) / $(this).height()) * 100 +'%'});
}