放大一张图片onclick

Question

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 image like so:

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

the used class:

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

it's hard to explain but right now what happens is, when you click an image it enlarges. when you click another image, it enlarges too but overlaps/stays hidden behind the other image that's enlarged.

What I would like to happen is when img1 is enlarged and the user selects img2, it should "close" img1 and enlarge img2.

Thank you :)

UPDATE

it now works barely, it opens after spamclicking and once enlarged I can minimize it again. but then I can't enlarge it anymore.

Can anybody help me with this?

<script>
    $(document).ready(function() {
        $("#header").load("header.html .header");
        $("#footer").load("footer.html .footer");

        $("body").on('click', function(){

            if(!$(".img1, .img2").hasClass('enlarged')){

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

        });
    });
</script>

Answer 1

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');
});

Answer 2

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" /> 

Answer 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');
});