dev

_includes/footer.html

@@ -1,5 +1,3 @@
-<!--
 <script src="/assets/gallery.js"></script>
--->
 </body>
 </html>

_layouts/gallery_page.html

@@ -30,17 +30,17 @@
 <div id="gallery">
   {% for image in sorted_imgs %}
   <div class="picture-frame">
-    <a class="item lazy" href="{{ image[0] }}">
+    <a class="item" 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>
+    <div class="meta"><div class="pull-left">{{ image_path | exif: 'model' }}</div> <div class="pull-right">{{ image_path | exif: 'shutter_speed_value'}}</div></div>
+    <div class="meta"><div class="pull-left">{{ image_path | exif: 'lens_model' }}</div> <div class="pull-right">f/{{ image_path | exif: 'aperture_value' }}</div></div>
     {% endif %}
   </div>
   {% endfor %}

photos/assets/gallery.css

@@ -2251,25 +2251,33 @@ a {
   box-sizing: border-box;
   overflow: hidden;
   position: relative; }
-  #gallery .item {
-    float: left; }
-    #gallery .item.last-row, #gallery .item.last-row ~ a {
+#gallery .item {
+  float: left; 
+  margin-bottom: 5px;
+  }
+#gallery .item a {
+}
+#gallery .item.last-row, #gallery .item.last-row ~ a {
   margin-bottom: 0; }
-    #gallery .item img {
-      width: 100%;
-      height: 100%;
+#gallery .item img {
   background: rgba(255, 255, 255, 0.02);
   opacity: 0.9; }
-    #gallery .item:hover img {
+#gallery .item:hover img {
   opacity: 1; }
 
 .picture-frame {
   overflow: hidden;
   position: relative;
   float: left;
-  padding: 0px;
-  padding-bottom: 50px;
+  padding: 5px;
   background: rgba(0,0,0, 0.5);
   color: white;
   font-size: 12px;
 }
+
+.meta {
+  overflow: hidden;
+  position: relative;
+  padding: 5px;
+  background: rgba(0,0,0, 0.5);
+}