photos.html

---
layout: gallery
title: Korede's Photos
permalink: /photos/
support: [jquery, gallery]
---

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css" integrity="sha512-yxWNfGm+7EK+hqP2CMJ13hsUNCQfHmOuCuLmOq2+uv/AVQtFAjlAJO8bHzpYGQnBghULqnPuY8NEr7f5exR3Qw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js" integrity="sha512-SxO0cwfxj/QhgX1SgpmUr0U2l5304ezGVhc0AO2YwOQ/C8O67ynyTorMKGjVv1fJnPQgjdxRz6x70MY9r0sKtQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css" integrity="sha512-Rck8F2HFBjAQpszOB9Qy+NVLeIy4vUOMB7xrp46edxB3KXs2RxXRguHfrJqNK+vJ+CkfvcGqAKMJTyWYBiBsGA==" crossorigin="anonymous" />

<style>
  .sub-gallery {
    column-count: 4;
    column-gap: 1px;
  }
  
  @media only screen and (max-width: 600px) {
    .sub-gallery {
      column-count: 2;
    }
  }
  
  .thumbnail {
    width: auto; 
    text-align: center; 
    width: 150px;
    padding: 0; margin: 0;
    transition: 0.3s;
  }

  .thumbnail > img {
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    padding: 0; margin: 0;
    opacity: 1;
  }

  .photo-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }

  /* Modal Content (Image) */
  .photo-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }

  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  #photo-modal-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
</style>

<div class="center pa3 b--dotted">

  <h2 class="gallery-title">photos</h2>

  <p>
    I've loved photography since secondary school. I covered a lot of sports and social events as the "Media" Prefect at <a href="https://www.olashoreschool.com/">Olashore</a>, alongside a bunch of audio visual stuff like the weekly school news update and the school magazine Oasis.
  </p>

  <p>
    I got my first DSLR in 2013 and learned a lot of technical stuff about photography as part of an elective "trade subject" i took. Having those skills helped a lot with the role and helped pique my interest in the Artform.
  </p>

  <p>
    Doing it pretty dedicatedly in high school was a lot of work, and i was a lot less interested in doing it professionally by the time i'd started college, but i volunteered occasionally with student orgs since i had a camera.
  </p>

  <p>
    Most of the photos posted here were taken on my iPhone. I have an original iPhone X which i got in 2018. It's been my primary driver for photoraphy since. I was planning to pick up my Canon Rebel T3 more devotedly at the start of 2019 but then i lost it :(
  </p>

  <p>
    I really enjoy iPhone photography, and i've tweeted about how the quirks of mobile phone camera's have contributed to certain photo aesthetics of the current era. Just like someone might look at a sepia photo and think of a certain time period (60s maybe?), someone might look at a grainy slightly-zoomed iPhone pic and think of the 2010s.
  </p>

  <div id="gallery">
    <div class="sub-gallery">
      <!-- 
        add photos from "ig" gallery as well
      -->
      {% assign n = site.data.photos | size %}
      {% assign photos = site.data.photos | sample: n %}
      {% for photo in photos %}
        <div class="thumbnail">
          <img 
            class="photo"
            src="{{ photo.thumbnail }}"
            h="{{ photo.h }}"
            w="{{ photo.w }}"
            index="{{ forloop.index }}"/>
        </div>
      {% endfor %}
    </div>

    <div id="photo-modal" class="photo-modal">
      <span class="close f7">&times;</span>
      <img class="photo-modal-content" id="photo-modal-content">
      <div id="photo-modal-caption"></div>
    </div>
  </div>

  <script>
    let items = [];

    let subGallery = document.getElementsByClassName("sub-gallery")[0];

    function showModal (url) {
      let img = document.getElementById('photo-modal-content');
      img.src = url;
      img.onclick = function (e) { e.preventDefault(); }
      let modal = document.getElementById('photo-modal');
      modal.style.display = "block";
      modal.onclick = function (e) {
        modal.style.display = "none";
      }
    }  

    // parse img tags in DOM into PhotoSwipe structure
    for (let item of subGallery.children) {
      let img = item.firstElementChild;
      items.push({
        src: img.getAttribute("src"),
        h: parseInt(img.getAttribute("h")),
        w: parseInt(img.getAttribute("w")),
      });
      img.onclick = function (e) {
        showModal(e.target.getAttribute("src"));
      };
      img.onscroll = function (e) {
        if (window.scrollTop > e.target.offsetTop - 150)
          e.target.style.opacity = 1;
      };
    }
    console.log(items);
  </script>

</div>