photo-gallery.html

---
layout: gallery
permalink: /photo-gallery/
title: Gallery
background: "/img/home/main.jpg"
images:
  - image_path: /img/gallery/M45.jpg
    title: M45
  - image_path: /img/gallery/Orion.jpg
    title: Orion Nebula
  - image_path: /img/gallery/Andromeda.jpg
    title: Andromeda Galaxy
  - image_path: /img/gallery/M81_M82.jpg
    title: M81 & M82
  - image_path: /img/gallery/Christmas_Tree_Cluster.jpg
    title: Christmas Tree Cluster
  - image_path: /img/gallery/Crescent_And_Soap_Bubble_Nebula.jpg
    title: Crescent And Soap Bubble Nebula
  - image_path: /img/gallery/Cygnus_Wall.jpg
    title: Cygnus Wall
  - image_path: /img/gallery/Elephants_Trunk_Nebula.jpg
    title: Elephant's Trunk Nebula
  - image_path: /img/gallery/Fishhead_Nebula.jpg
    title: Fishhead Nebula
  - image_path: /img/gallery/Heart_Nebula.jpg
    title: Heart Nebuala
  - image_path: /img/gallery/IC1396.jpg
    title: IC 1396
  - image_path: /img/gallery/Sh2-129_and_Ou4.jpg
    title: Sh2-129 and Ou4
  - image_path: /img/gallery/Leo_Triplet.jpg
    title: Leo Triplet
  - image_path: /img/gallery/M106.jpg
    title: M106
  - image_path: /img/gallery/M3.jpg
    title: M3
  - image_path: /img/gallery/M33.jpg
    title: M33
  - image_path: /img/gallery/M81.jpg
    title: M81 (Bode's Galaxy)
  - image_path: /img/gallery/Moon1.jpg
    title: The Moon
  - image_path: /img/gallery/NGC6823.jpg
    title: NGC 6823
  - image_path: /img/gallery/Pacman.jpg
    title: Pacman Nebula
  - image_path: /img/gallery/Pelican_Nebula.jpg
    title: Pelican Nebula
  - image_path: /img/gallery/The_Bubble_Nebula.jpg
    title: Bubble Nebula
  - image_path: /img/gallery/Tulip_Nebula.jpg
    title: Tulip Nebula
---

<div class="container-gallery">
  {% for image in page.images %}
  <figure class="post-image">
    <img
      data-enlargeable
      class="demo-image"
      data-image="{{ image.image_path }}"
      src="{{ image.image_path }}"
      data-title="{{ image.title}}"
      alt="{{ image.title}}"
    />
    <figcaption>{{ image.title}}</figcaption>
  </figure>
  {% endfor %}
</div>

<style>
  .container-gallery {
    column-count: 3;
    column-gap: 10px;
  }
  img {
    max-width: 100%;
    display: block;
    object-fit: contain;
  }
  .demo-image {
    cursor: url("/img/helpers/plus_cursor.png") 25 25, auto;
    display: inline-block;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 16px;
  }
  figure {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
  }

  figure > img {
    grid-row: 1 / -1;
    grid-column: 1;
  }

  figure a {
    color: black;
    text-decoration: none;
  }

  figcaption {
    grid-row: 2;
    grid-column: 1;
    background-color: transparent;
    justify-self: center;
    color: black;
    font-size: 12px;
    margin-bottom: -1%;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("img[data-enlargeable]")
    .addClass("img-enlargeable")
    .click(function () {
      var src = $(this).attr("src");
      var modal;

      function removeModal() {
        modal.remove();
        $("body").off("keyup.modal-close");
      }
      modal = $("<div>")
        .css({
          background: "RGBA(0,0,0,.5) url(" + src + ") no-repeat center",
          backgroundSize: "contain",
          width: "100%",
          height: "100%",
          position: "fixed",
          zIndex: "10000",
          top: "0",
          left: "0",
          cursor: "zoom-out",
        })
        .click(function () {
          removeModal();
        })
        .appendTo("body");
      //handling ESC
      $("body").on("keyup.modal-close", function (e) {
        if (e.key === "Escape") {
          removeModal();
        }
      });
    });
</script>