Vollbild beim Anklicken

Question

Ich habe eine Liste von vor und nach Bilder jeweils 300px von 300px. Wenn Sie auf jedes Bild klicken, sollte es das angeklickte Bild im Vollbildmodus bringen. Es bringt jedoch nur das erste Bild im Vollbildmodus, wenn Sie also auf Bild 5 klicken, erscheint das Vollbild pic1.

Wie kann ich ich mein Skript fixieren, um jedes Bild unabhängig und nicht nur das erste Bild zu bremsen?

$(document).ready(function() { 
 
    $('.gallery_pics').click(function(e) { 
 
    $('.gallery_pics').toggleClass('fullscreen'); 
 
    }); 
 
});

.gallery_pics_holder { 
 
    border: px solid green; 
 
    width: 100%; 
 
    text-align: center; 
 
    height: 350px; 
 
    display: table; 
 
} 
 
.gallery_pics { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 10px; 
 
    text-align: center; 
 
    background-color: #3C0; 
 
} 
 
.gallery_pics img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.gallery_pics:hover { 
 
    cursor: pointer; 
 
} 
 
.gallery_pics.fullscreen img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.gallery_pics.fullscreen { 
 
    z-index: 9999; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    height: 90%; 
 
    top: 5%; 
 
    left: 5%; 
 
    background-color: #0FF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="gallery_pics_holder"> 
 

 
    <div class="gallery_pics"> 
 
    <img src="images/before1.jpg" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after1.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before2.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after2.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before3.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after3.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before4.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after4.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before5.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after5.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before6.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after6.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before7.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after7.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before8.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after8.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before9.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after9.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before0.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after0.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header-->

Answer 1

Sie müssen beziehen diese das Element geklickt sich nicht alle .gallery_pics

$(document).ready(function() { 
 
    $('.gallery_pics').click(function(e) { 
 
    // Change Selector Here 
 
    $(this).toggleClass('fullscreen'); 
 
    }); 
 
});

.gallery_pics_holder { 
 
    border: px solid green; 
 
    width: 100%; 
 
    text-align: center; 
 
    height: 350px; 
 
    display: table; 
 
} 
 
.gallery_pics { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 10px; 
 
    text-align: center; 
 
    background-color: #3C0; 
 
} 
 
.gallery_pics img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.gallery_pics:hover { 
 
    cursor: pointer; 
 
} 
 
.gallery_pics.fullscreen img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.gallery_pics.fullscreen { 
 
    z-index: 9999; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    height: 90%; 
 
    top: 5%; 
 
    left: 5%; 
 
    background-color: #0FF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gallery_pics_holder"> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/300/300/sports"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/300/300/nature"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/300/300/"> 
 
    </div> 
 
</div>

Answer 2

Verwenden this statt $('.gallery_pics') das geklickt Element innerhalb der Veranstaltung Adresse:

$(document).ready(function(){ 
    $('.gallery_pics').click(function(e){ 
    $(this).toggleClass('fullscreen'); 
    }); 
}); 

Answer 3

Gebrauch „this“ in der Klick-Funktion das geklickt Element zu erhalten, den Klassennamen in dem Click-Handler verwendet wird alle Elemente mit dem Klassennamen

$(document).ready(function(){ 
    $('.gallery_pics').click(function(e){ 
    $(this).toggleClass('fullscreen'); 
    }); 
});