In this script, we have an image gallery script with a grid layout. Each image is displayed with a fixed width and height, and when clicked, a modal window opens up to display the full-size version of the image. The user can close the photo gallery modal by clicking on the close button or anywhere outside the modal.

You can add more images to the photo gallery script by simply duplicating the <img> tags and updating the src attribute with the appropriate image URLs.

Please make sure to replace the example image URLs (image1.jpg, image2.jpg, image3.jpg) with the actual URLs of your images.

Feel free to customize the styling and add more features as per your requirements.

If you are looking for a more advanced gallery, have a look at the free PHP Gallery.

Image 1 Image 2 Image 3 
<!DOCTYPE html>
<html>
<head>
  <title>Image Gallery</title>
  <style>
    .gallery {
      display: flex;
      flex-wrap: wrap;
    }
    .gallery img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      margin: 10px;
      cursor: pointer;
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 50px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    }
    .modal-content img {
      width: 100%;
    }
    .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
    }
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>Image Gallery</h2>

  <div class="gallery">
    <img src="image1_thumb.jpg" alt="Image 1" onclick="openModal('image1.jpg')">
    <img src="thumb2_thumb.jpg" alt="Image 2" onclick="openModal('image2.jpg')">
    <img src="image3_thumb.jpg" alt="Image 3" onclick="openModal('image3.jpg')">
    <!-- Add more images here -->
  </div>

  <div class="modal" id="modal">
    <span class="close" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <img id="modal-image" src="">
    </div>
  </div>

  <script>
    function openModal(imageUrl) {
      var modal = document.getElementById('modal');
      var modalImage = document.getElementById('modal-image');
      
      modal.style.display = 'block';
      modalImage.src = imageUrl;
    }

    function closeModal() {
      var modal = document.getElementById('modal');
      modal.style.display = 'none';
    }
  </script>
</body>
</html>