Enlarge One Pic Onclick

I'm making a website with images on it, and if you click on one of the images it should enlarge. I did that by using the toggleClass function in jquery I enlarged the selected imag

Solution 1:

You could do something like the following. This will remove the enlarged class. Then add it to the image that you have clicked on. (See jsfiddle here)

$(".img1, .img2").on('click', function() {

  $(".img1, .img2").removeClass("enlarged");
  $(this).toggleClass('enlarged');

});

See working example below:

$(".img1, .img2").on('click', function() {
  $(".img1, .img2").removeClass("enlarged");
  $(this).toggleClass('enlarged');
});

.enlarged {
  position: absolute;
  z-index: 2;
  width: 500px;
  height: 600px;
  top: -10%;
  left: 300px;
}

label {
  font-weight: bold;
}

input[type=text] {
  width: 20em
}

p {
  margin: 1em 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="https://placehold.it/350x150" alt="image" />
<img class="img2" src="https://placehold.it/350x150/F2F5A9" alt="image" />

Solution 2:

Add a generic class to all clickable images, like 'gallery'

then

$(".gallery").on('click',function(){
    //removes enlarged class from all images
    $(".gallery.enlarged").removeClass('enlarged');
    //adds enlarged class to clicked image
    $(this).addClass('enlarged');
});

Solution 3:

If you want to have only one "enlarged" class for the img you click on, I think the simpliest is to remove all "enlarged" class then add the class for the right element :

$(".img1, .img2").on('click',function(){
    $(".img1, .img2").removeClass('enlarged');
    $(this).addClass('enlarged');
});