photos.html

---
layout: default
title: Photos
---

<div class="photos">
  {%- for photo in site.data.photos -%}
  {%- assign a = photo.src | split: '20' -%}
  {%- assign id = a[1] | split: '.' -%}
  {%- assign id = id[0] -%}
  <div class="thumb" id="img-{{ id }}">
    <label for="{{ forloop.index }}">
      <img loading="lazy" class="thumb-image" src="/assets/photos/{{ photo.src }}" alt="{{ photo.caption }}">
      <div class="caption">
        <span class="photo-date">{{ photo.date }}</span>
        <span class="photo-caption">{{ photo.caption }}</span>
      </div>
    </label>
    <input class="modal-state" id="{{ forloop.index }}" type="checkbox">
    <div class="modal">
      <div id="left-{{- forloop.index -}} " style="left:20px" class="modal-arrow">ᐸ</div>
      <div id="right-{{- forloop.index -}}" style="right:20px" class="modal-arrow">ᐳ</div>
      <label for="{{ forloop.index }}">
        <div class="modal-content">
          {% if photo.video %}
            <video controls style="justify-content:center;width:70%;object-fit:scale-down;">
                <source src="/assets/photos/{{ photo.video }}" type="video/mp4">
                  Videos not supported
                </source>
            </video>
          {% else %}
            <img loading="lazy" class="modal-photo" src="/assets/photos/{{ photo.src }}" alt="{{ photo.caption }}">
          {% endif %}
          <div>
            <span class="photo-date">{{ photo.date }}</span>
            <span class="photo-caption">{{ photo.caption }}</span>
          </div>
        </div>
      </label>
    </div>
  </div>
  {%- endfor -%}
</div>

<script>
<!--This script simply enables direct-linking to photos and the back/advance slideshow arrows.-->
const get=document.getElementById.bind(document);
const queryAll=document.querySelectorAll.bind(document);
try{get(new URL(window.location.href).searchParams.get("i")).checked=true;}catch(e){}
queryAll(".modal-arrow").forEach((el)=>{el.onclick=(e)=>{
  [dir,idx]=e.target.id.split("-");
  try{get((+idx+(dir=="right"?1:-1)).toString()).checked=true; get(idx).checked=false;}catch(e){}
};});
document.addEventListener("keydown", (e) => {
  if (event.key === "Escape" || event.key === "Esc") {
    queryAll(".modal-state").forEach((el)=>{
      el.checked = false;
    });
  }
});
</script>