full screen image when clicked

Question

I have a list of before and after pics each are 300px by 300px. when u click on each image it should bring the clicked image in fullscreen. However it only brings the first image on full screen so if u click on pic 5 it full screens pic1.

How can I fix my script to brink up each image independently and not just the first image?

$(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

React Component

If you are in reactJS app with tailwindcss, I have create a Component can help you!!

Codesanbox

• As you can see here i use the component:

<div className="font-semibold p-2 flex flex-col h-screen  content-center justify-center">
        <ImageWithFullScreen imageUrl={imgPath} />
</div>

• This is the component:

import { useState } from "react";

export default ({ imageUrl }) => {
  const [isFullScreen, setIsFullScreen] = useState(false);
  const fullScreenStyle = {
    container: {
      position: "fixed",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      backgroundColor: "rgba(0, 0, 0, 0.6)",
      zIndex: 9999,
    },
    image: {
      maxWidth: "100%",
      maxHeight: "100%",
      margin: "auto",
      position: "absolute",
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
  };

  return (
    <div
      style={isFullScreen ? fullScreenStyle.container : {}}
      className={"hover:cursor-pointer"}
      onClick={(_) => setIsFullScreen(!isFullScreen)}
    >
      <img
        src={imageUrl}
        alt={"image"}
        style={isFullScreen ? fullScreenStyle.image : {}}
        className={isFullScreen ? "" : "w-60 h-60 object-cover"}
      />
    </div>
  );
};

```

Answer 2

use "this" inside the click function to get the clicked element, using the className inside the click handler will select all the elements with that class name

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

Answer 3

You need to refer to this the element clicked itself not all .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 4

Use this instead of $('.gallery_pics') to address the clicked element inside the event:

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