{% include header.html %}

<a id="gallery-back" href="/">
  {% include svg_arrow_back.html %}
  <span>ALBUMS</span>
</a>

<h1 id="gallery-header">
  <div class="container">
    <a href="/{{ site.gallery.dir }}/{{ page.gallery }}">{{ page.title }}</a>
    <span class="date">{{ page.date | date: "%Y" }}</span>
  </div>
  <img id="bg-loader" src="thumbs/{{ page.blur_image }}">
  <div id="bg-source" style="background:url(thumbs/{{ page.blur_image }})"></div>
  <div id="bg-wrapper"></div>
</h1>

<div id="zoom">
  <div class="controls">
    <a class="close">{% include svg_close.html %}</a>
    <a class="arrow left">{% include svg_arrow_left.html %}</a>
    <a class="arrow right">{% include svg_arrow_right.html %}</a>
  </div>
  <div class="container"></div>
  <div class="loading">{% include svg_loading.html %}</div>
</div>

{% assign sorted_imgs = page.images | sort %}

<div id="gallery">
  {% for image in sorted_imgs %}
  <div class="picture-frame">
    <a class="item lazy" href="{{ image[0] }}">
      <img
        src="thumbs/{{ image[0] }}"
        data-src="thumbs/{{ image[0] }}"
        height="300" />
    </a>
    {% assign image_path = '/usr/local/jekyll/sites/photos.kameronkenny.com/photos/' | append: page.gallery | append: '/' | append: image[0] %}
    {% capture has_exif %}{{ image_path | exif: "exif?" }}{% endcapture %}
    {% if has_exif %}
    <p>{{ image_path | exif: 'model' }} {{ image_path | exif: 'shutter_speed_value'}}</p>
    <p>{{ image_path | exif: 'lens_model' }} f{{ image_path | exif: 'aperture_value' }}</p>
    {% endif %}
  </div>
  {% endfor %}
</div>

{% include footer.html %}