image-gallery.liquid

{% comment %}
Image Gallery by Marcos Watanabe (https://marcoswatanabe.com/)
{% endcomment %}

{%- unless settings.page_width != blank -%}
  {%- assign settings_page_width = 1600 -%}
{%- endunless -%}
{%- assign images_per_row = section.settings.images_per_row | default: 3 -%}
{%- assign images_per_row_mobile = section.settings.images_per_row_mobile | default: 3 -%}
{%- assign grid_gap = section.settings.grid_gap | default: 10 -%}

<section class="" id="section-{{ section.id }}">
  {%- if section.settings.heading != blank -%}
    <div class="page-width">{{ section.settings.heading }}</div>
  {%- endif -%}
  
  {%- if section.blocks.size > 0 -%}
  <div class="mw-image-gallery {% unless section.settings.full_width != blank %} page-width{% endunless %}">
    {%- for block in section.blocks -%}
      {%- assign image = block.settings.image -%}
      <a href="{{ image | img_url: '1600x' }}" data-desktop="{{ image | img_url: '1600x' }}" data-mobile="{{ image | img_url: '749x' }}" class="mw-image-gallery__item" target="_blank" title="{{ image.alt }}">
          <img 
            srcset="
                  {%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if image.width >= 533 -%}{{ image | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if image.width >= 720 -%}{{ image | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if image.width >= 940 -%}{{ image | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if image.width >= 1066 -%}{{ image | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ image | image_url }} {{ image.width }}w
                "
            src="{{ image | image_url: width: 533 }}"
            sizes="(min-width: {{ settings_page_width }}px) {{ settings_page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
            alt="{{ image.alt | default: page.title | append: " " | append: forloop.index }}"
            loading="lazy"
            >
      </a>
    {%- endfor -%}
  </div>
  
  <div id="mw-modal" class="mw-modal">
    <div class="mw-modal-content">
      <img id="mw-modal-image" src="" alt="">
      <a id="mw-modal-prev" class="mw-modal-prev mw-arrow mw-arrow-left" href="#">&#10094;</a>
      <a id="mw-modal-next" class="mw-modal-next mw-arrow mw-arrow-right" href="#">&#10095;</a>
      <a id="mw-modal-close" class="mw-modal-close" href="#">&#10005;</a>
    </div>
  </div>
  {%- endif -%}
</section>

<style>
/* Gallery grid */
.mw-image-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  margin-bottom: 30px;

  /* Hide scrollbar for Firefox */
  scrollbar-width: none;
  -ms-overflow-style: none;
  
  /* Hide scrollbar for IE 10+ */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
  
/* Hide scrollbar for WebKit/Blink */
.mw-image-gallery::-webkit-scrollbar {
  width: 0;
  height: 0;
} 

/* Gallery images */
.mw-image-gallery a {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  object-fit: cover;
  cursor: pointer;
  position: relative;
  cursor:pointer;
}
  
.mw-image-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  position: absolute;
}

/* Modal popup */
.mw-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}
.mw-modal.show {
  display:block;
}
.mw-modal-content { 
  display: flex;
  align-items: center; /* Vertical alignment */
  justify-content: center; /* Horizontal alignment */
  margin: auto;
  width: 80%;
  height:100%;
  max-width: 1200px;
}

.mw-modal-content img {
  /*width: 100%;
  height: 100%;*/
  object-fit: contain;
}
.mw-modal-content img {
  max-width: 100vw;
  max-height: 100vh;
}
.mw-modal-close {
  display: block;
  position: absolute;
  right: 50px;
  top: 50px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  color: #ffffff80;
  line-height: 50px;
  cursor: pointer;
  text-decoration: none;
  font-size: 40px;
}
  @media (max-width: 768px) {
    .mw-modal-close {
      right: 25px;
      top: 25px;
    }
  }
/* Arrows */
.mw-arrow {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
  cursor: pointer;
  line-height:50px;
  color: #000;
}

.mw-arrow:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.mw-arrow-left {
  left: 0;
}

.mw-arrow-right {
  right: 0;
}
  @media (max-width: 768px) {
  {%- if section.settings.mobile_slider != blank -%}
      .mw-image-gallery {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        grid-gap:5px;
        grid-gap: {{ grid_gap | divided_by: 2 }}px;
      }
    
      .mw-image-gallery a {
        width: 70%;
        height: auto;
        margin-right: 10px;
        scroll-snap-align: start;
        flex: 0 0 70%;
        padding-bottom: 70%;
      }
    
      .mw-image-gallery a:last-child {
        margin-right: 0;
        margin-left: auto;
        scroll-snap-align: end;
      }
  {%- else -%}
    .mw-image-gallery {
      grid-template-columns: repeat({{ images_per_row_mobile }}, 1fr);
      grid-gap: {{ grid_gap | divided_by: 2 }}px;
    }
  {%- endif -%}
  }
  @media (min-width: 769px) {
    .mw-image-gallery {
      display: grid;
      grid-template-columns: repeat({{ images_per_row }}, 1fr);
      grid-gap: {{ grid_gap }}px;
    }
  }
</style>


{% javascript %}
(function(){
  const images = document.querySelectorAll('.mw-image-gallery a');
  const modal = document.querySelector('.mw-modal');
  const modalImage = modal.querySelector('img');
  let currentIndex = 0;
  
  // Open modal popup and show clicked image
  function showModal(index) {
    if(window.innerWidth > 749){
      modalImage.src = images[index].dataset.desktop;
    } else {
      modalImage.src = images[index].dataset.mobile;  
    }    
    modal.classList.add('show');
    currentIndex = index;
  }
  
  // Hide modal popup
  function hideModal() {
    modal.classList.remove('show');
  }
  
  // Show previous image in gallery
  function showPrevImage(e) {
    e.stopPropagation()
    if (currentIndex === 0) {
      showModal(images.length - 1);
    } else {
      showModal(currentIndex - 1);
    }
  }
  
  // Show next image in gallery
  function showNextImage(e) {
    e.stopPropagation()
    if (currentIndex === images.length - 1) {
      showModal(0);
    } else {
      showModal(currentIndex + 1);
    }
  }
  
  // Add click event listeners to all images
  images.forEach((image, index) => {
    image.addEventListener('click', (e) => {
      e.preventDefault()
      showModal(index);
    });
  });  
    
  // Add click event listeners to modal navigation arrows
  const prevArrow = modal.querySelector('.mw-modal-prev');
  prevArrow.addEventListener('click', showPrevImage);
  
  const nextArrow = modal.querySelector('.mw-modal-next');
  nextArrow.addEventListener('click', showNextImage);
  
  // Add click event listener to modal background to hide it
  modal.addEventListener('click', hideModal);

  
})()
{% endjavascript %}

{% schema %}
{
  "name": "Image Gallery",
  "settings": [
    {
      "type":"richtext",
      "id":"heading",
      "label":"Heading",
      "default":"<h2>Image Gallery</h2>"
    },
    {
      "type": "range",
      "id": "images_per_row",
      "label": "Images per row",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "images_per_row_mobile",
      "label": "Images per row on mobile",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "grid_gap",
      "label": "Grid gap",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 10
    },
    {
      "type":"checkbox",
      "id":"full_width",
      "label":"Full width gallery",
      "default":true
    },
    {
      "type":"checkbox",
      "id":"mobile_slider",
      "label":"Slider on mobile",
      "default":true,
      "info":"If checked, the images per row on mobile is ignored"
    }
  ],
  "blocks":[
    {
      "type":"image",
      "name":"Image",
      "settings":[
        {
          "type":"image_picker",
          "id":"image",
          "label":"Image"
        }
      ]
    }
  ],
  "presets":[
    {
      "name":"Image Gallery",
      "category":"Image"
    }
  ]
  
}
{% endschema %}