Update to work section: add images to the DOM

TrifanNarcis · Feb 13, 2015 · 8b7cf88 · 8b7cf88
1 parent b9708ff
commit 8b7cf88
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 28 deletions.
diff --git a/_includes/work.html b/_includes/work.html
@@ -13,10 +13,11 @@ <h3 id="work">Work</h3>
       <div class="thumb-container">
       {% for project in site.data.settings.projects %}
       <label for="{{ project.folder }}">  
-        <div class="thumb-unit" data-folder="{{ project.folder }}" style="background-image: url(assets/img/work/{{project.folder}}/thumb.jpg);"> 
-          <div class="thumb-overlay">
-            <strong>{{ project.name }}</strong>
-          </div>
+        <div class="thumb-unit" data-folder="{{ project.folder }}">
+          <img src="assets/img/work/{{project.folder}}/thumb.jpg" alt="{{ project.name }}" />
+        </div> 
+        <div class="thumb-overlay">
+          <strong>{{ project.name }}</strong>
         </div>
       </label>
       {% endfor %}

diff --git a/assets/css/3-sections/_work.sass b/assets/css/3-sections/_work.sass
@@ -34,32 +34,31 @@
 .thumb-wrap, .work-wrap
   width: 50%
   float: left
-
+  
 .thumb-container
+  display: block
   max-width: 960px
   margin: 0px auto
-
   +clearfix
 
-  .thumb-unit
+  label
+    position: relative
     display: block
-    width: 25%
     float: left
-    position: relative
-    padding-top: 16%
+    width: 25%
     cursor: pointer
-    background:
-      position: center center
-      repeat: no-repeat
-      size: cover
-    +perspective(300)
-    @if $animation != "bounceOut"
+
+    .thumb-unit
+      display: block
       overflow: hidden
 
+      img
+        display: block
+        max-width: 100%
+
     @media screen and (max-width: 760px)
       width: 50%
-      padding-top: 26%
-
+
     .thumb-overlay
       +position(absolute)
       +align-items(center)
@@ -71,7 +70,7 @@
 
       strong
         display: block
-        padding: 0px 20px
+        padding: 0 9%
         color: white
         font:
           weight: 300
@@ -85,7 +84,6 @@
       .thumb-overlay
         @extend %#{$animation}
 
-
 
 .work-container
   max-width: 600px
@@ -130,8 +128,4 @@
 
     h4
       margin-left: 60px
-
-
-
-
-
+
diff --git a/assets/js/functions.js b/assets/js/functions.js
@@ -31,7 +31,7 @@ function workBelt() {
   $(".trigger").remove();
   $(".return").remove();
 
-  $('.thumb-unit').click(function() {
+  $('.thumb-container label').click(function() {
     $('.work-belt').addClass("slided");
     $('.work-container').show();
   });
@@ -48,10 +48,10 @@ function  workLoad() {
 
   $.ajaxSetup({ cache: true });
 
-  $('.thumb-unit').click(function() {
+  $('.thumb-container label').click(function() {
     var $this = $(this),
         newTitle = $this.find('strong').text(),
-        newfolder = $this.data('folder'),
+        newfolder = $this.find('.thumb-unit').data('folder'),
         spinner = '<div class="loader">Loading...</div>',
         newHTML = 'work/'+ newfolder;