index.html

---
layout: default
photos: 
  - path: home/04.JPG
  - path: home/05.JPG
  - path: home/06.JPG
  - path: home/02.JPG
---
<!-- 
  - path: marks-of-existence/nonidentity04.jpg
  - path: marks-of-existence/nonidentity03.jpg
  - path: marks-of-existence/nonidentity02.jpg
  - path: marks-of-existence/nonidentity01.jpg
-->

<!-- <section> -->
  <div class='grid'>
      {% for photo in page.photos %}
      <div class = "grid-item {{ photo.categories }}">
        <!--a href="{{ site.baseurl }}/assets/photos/{{ photo.path}}" data-lightbox="gallery" rel="lightbox"-->
          <img src="{{ site.baseurl }}/assets/photos/{{ photo.path}}"> <!--class="hover-fade"-->
        <!--/a-->
      </div>
      {% endfor %}
  </div>

<!-- </section> -->

<script src="{{ site.baseurl }}/javascripts/lightbox-plus-jquery.js"></script>
<script>
  lightbox.option({'disableScrolling':true, 'showImageNumberLabel':false})
</script>

<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
<!-- <script src="{{ site.baseurl }}/javascripts/packery-mode.pkgd.min.js"></script> -->
<script> 
  // init Isotope
  var $grid = $('.grid').isotope({
    // layoutMode: 'masonry',
    itemSelector: '.grid-item',
    transitionDuration: '0.8s',
    // stagger: '0.04s',
    // disable scale transform transition when hiding
    hiddenStyle: {
      opacity: 0
    },
    visibleStyle: {
      opacity: 1
    }
  });
  
  // layout Isotope after each image loads
  $grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
  });

  // reveal all items after init
  var iso = $grid.data('isotope');
  $grid.isotope( 'reveal', iso.items );
</script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>