photos.html

---
layout: default
title: photos
---
<div class="photoCardsSmall w3-hide-medium w3-hide-large"></div>
<div class="photoCardsLarge w3-hide-small"></div>

{% include jquery.html %}
<script type="text/javascript">
    var images =  [
        {% for post in site.categories.gallery %}'{{ post.featured }}'{% unless forloop.last %},{% endunless %}    
        {% endfor %}
    ];
    var names = [
            {% for post in site.categories.gallery %}'{{ post.title }}'{% unless forloop.last %},{% endunless %}    
            {% endfor %}
    ];
    var dates = [
            {% for post in site.categories.gallery %}'{{ post.date | date: '%B %d, %Y' }}'{% unless forloop.last %},{% endunless %}    
            {% endfor %}
    ]
    var pages = [
            {% for post in site.categories.gallery %}'{{ post.url }}'{% unless forloop.last %},{% endunless %}    
            {% endfor %}
    ]
    // GALLERY FUNCTIONS
    $(document).ready(function(){
  var countToFour = 0
  for (i=0; i < images.length; i++) {
          
  // large gallery
          // Create the rows  
          if (i == 0) {
                  $('.photoCardsLarge').append("<div class='w3-row-padding w3-center w3-margin aRow'> ");
          } else if (countToFour == 4) {
                  $('.photoCardsLarge').append("<div class='w3-row-padding w3-center w3-margin aRow'> " );
                  countToFour = 0;
          }
          
  // small gallery
          if (i == 0) {
                  $('.photoCardsSmall').append( "<div class='w3-row w3-center w3-margin'> " +  
                                                "<div class='w3-card-2'> " +
                                                "<a href='" + pages[i] + "'> " +
                                                "<img src='" + images[i] + "' style='width:100%' > " + "</a> " +
                                                "<div class='w3-padding w3-center'> " +
                                                "<h5>" + names[i] +
                                                "<h5 class='w3-opacity'>" + dates[i]);
          } else {
                  $('.photoCardsSmall').append(   "<div class='w3-row w3-center w3-margin'> " +  
                                                "<div class='w3-card-2'> " +
                                                "<a href='" + pages[i] + "'> " +
                                                "<img src='" + images[i] + "' style='width:100%' > " + "</a> " +
                                                "<div class='w3-padding w3-center'> " +
                                                "<h5>" + names[i] + "</h5> " +
                                                "<h5 class='w3-opacity'>" + dates[i] + "</h5>");
          }
          countToFour++;
  }
  // Insert the images into the rows
  var j = 0;
  $('.aRow').each(function() {
                  for (i=0;i<4;i++) {
                          if (images[j]) {
                                  $(this).append( "<div class='w3-quarter w3-container'> " +  
                                                  "<div class='w3-card-2'> " +
                                                  "<a href='" + pages[j] + "'> " +
                                                  "<img src='" + images[j] + "' style='width:100%' > " + "</a> " +
                                                  "<h5>" + names[j] +
                                                  "<h5 class='w3-opacity' style='padding-bottom:25px'>" + dates[j] + "</h5>" 
                                  );
                          }
                          j++;
                  }
          }
  )
});
</script>