Added photo, link layout. Fixed Fancybox

layout/_partial/after_footer.ejs

@@ -1,3 +1,6 @@
+<script src="<%- config.root %>js/jquery.imagesloaded.min.js"></script>
+<script src="<%- config.root %>js/gallery.js"></script>
+
 <% if (config.disqus_shortname){ %>
 <script type="text/javascript">
 var disqus_shortname = '<%= config.disqus_shortname %>';
@@ -15,7 +18,11 @@ var disqus_shortname = '<%= config.disqus_shortname %>';
 <% if (theme.fancybox){ %>
 <link rel="stylesheet" href="<%- config.root %>fancybox/jquery.fancybox.css" media="screen" type="text/css">
 <script src="<%- config.root %>fancybox/jquery.fancybox.pack.js"></script>
-<script src="<%- config.root %>js/caption.js"></script>
+<script type="text/javascript">
+(function($){
+  $('.fancybox').fancybox();
+})(jQuery);
+</script>
 <% } %>
 
 <%- partial('phasebeam') %>

layout/_partial/article.ejs

@@ -1,4 +1,7 @@
-<article class="<%= item.layout %>">
+<article class="post">
+  <% if (item.photos){ %>
+    <%- partial('post/gallery') %>
+  <% } %>
   <header>
     <%- partial('post/title') %>
     <% if (item.layout == 'post'){ %><%- partial('post/date') %><% } %>

layout/_partial/post/gallery.ejs

@@ -0,0 +1,15 @@
+<div class="gallery">
+  <div class="photoset">
+    <% if (item.photos.length){ %>
+      <% item.photos.forEach(function(photo){ %>
+        <img src="<%- photo %>">
+      <% }); %>
+    <% } else { %>
+      <img src="<%- item.photos %>">
+    <% } %>
+  </div>
+  <div class="control">
+    <div class="prev"></div>
+    <div class="next"></div>
+  </div>
+</div>

layout/_partial/post/title.ejs

@@ -1,8 +1,8 @@
 <% if (item.link){ %>
   <% if (item.title){ %>
-    <h1 class="title"><a href="<%- item.link %>" target="_blank"><%= item.title %></a></h1>
+    <h1 class="title"><a href="<%- item.link %>" class="link" target="_blank"><%= item.title %></a></h1>
   <% } else { %>
-    <h1 class="title"><a href="<%- item.link %>" target="_blank"><%= item.link %></a></h1>
+    <h1 class="title"><a href="<%- item.link %>" class="link" target="_blank"><%= item.link %></a></h1>
   <% } %>
 <% } else { %>
   <% if (index){ %>

source/css/_partial/article.styl

@@ -2,13 +2,13 @@ meta-width = 120px
 
 article
   background #fff
-  border 1px solid #ddd
   color color-font
   margin-bottom 50px
   box-shadow 0 0 16px rgba(0,0,0,0.3)
   text-align justify
   position relative
   border-radius 3px
+  overflow hidden
   header
     font-family font-title
     padding 15px 20px
@@ -18,6 +18,13 @@ article
       line-height 1.1
       a
         color color-font
+        &.link
+          &:after
+            content '\f08e'
+            color color-meta
+            font 12px font-icon
+            padding-left 10px
+            vertical-align super
 
     time
       color color-meta
@@ -188,7 +195,6 @@ article
     margin-left meta-width + 20*2px
 
   .entry-content
-    min-height 130px
     position relative
     &:before
       content ""
@@ -236,6 +242,54 @@ article
         &:hover
           text-decoration none
 
+  .gallery
+    overflow hidden
+    position relative
+    &:hover
+      .control
+        opacity 1
+
+    img
+      min-width 100%
+      max-width 100%
+      height auto
+      position absolute
+      top 0
+      left 0
+      opacity 0
+
+    .control
+      opacity 0
+      transition 0.3s
+
+    .prev, .next
+      position absolute
+      top 0
+      width 50%
+      height 100%
+      cursor pointer
+      &:before
+        position absolute
+        font 24px/1 font-icon
+        text-align center
+        width 24px
+        text-shadow 0 0 15px rgba(0,0,0,0.5)
+        color #fff
+        margin-top -12px
+        top 50%
+
+    .prev
+      left 0
+      &:before
+        content '\f053'
+        left 10px
+
+    .next
+      right 0
+      &:before
+        content '\f054'
+        right 10px
+
 .page
   &:before
     content ""

source/js/caption.js

@@ -1,15 +0,0 @@
-(function($){
-  $('.entry').each(function(i){
-    $(this).find('img').each(function(){
-      var alt = this.alt;
-
-      if (alt){
-        $(this).after('<span class="caption">' + alt + '</span>');
-      }
-
-      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox" rel="gallery' + i + '" />');
-    });
-  });
-
-  $('.fancybox').fancybox();
-})(jQuery);

source/js/gallery.js

@@ -0,0 +1,65 @@
+(function($){
+  // Caption
+  $('.entry-content').each(function(i){
+    $(this).find('img').each(function(){
+      var alt = this.alt;
+
+      if (alt){
+        $(this).after('<span class="caption">' + alt + '</span>');
+      }
+
+      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox" rel="gallery' + i + '" />');
+    });
+  });
+
+  // Gallery
+  var play = function(parent, item, callback){
+    var width = parent.width();
+
+    item.imagesLoaded(function(){
+      var _this = this[0],
+        nWidth = _this.naturalWidth,
+        nHeight = _this.naturalHeight;
+
+      callback();
+      this.animate({opacity: 1}, 500);
+      parent.animate({height: width * nHeight / nWidth}, 500);
+    });
+  };
+
+  $('.gallery').each(function(){
+    var $this = $(this),
+      current = 0,
+      photoset = $this.children('.photoset').children(),
+      all = photoset.length,
+      loading = true;
+
+    play($this, photoset.eq(0), function(){
+      loading = false;
+    });
+
+    $this.on('click', '.prev', function(){
+      if (!loading){
+        var next = (current - 1) % all;
+        loading = true;
+
+        play($this, photoset.eq(next), function(){
+          photoset.eq(current).animate({opacity: 0}, 500);
+          loading = false;
+          current = next;
+        });
+      }
+    }).on('click', '.next', function(){
+      if (!loading){
+        var next = (current + 1) % all;
+        loading = true;
+
+        play($this, photoset.eq(next), function(){
+          photoset.eq(current).animate({opacity: 0}, 500);
+          loading = false;
+          current = next;
+        });
+      }
+    });
+  });
+})(jQuery);

source/js/jquery.imagesloaded.min.js

@@ -0,0 +1,3 @@
+(function(c,n){var l="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function m(){var b=c(i),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function j(b,a){b.src===l||-1!==c.inArray(b,k)||(k.push(b),a?h.push(b):i.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),o&&d.notifyWith(c(b),[a,e,c(i),c(h)]),e.length===k.length&&(setTimeout(m),e.unbind(".imagesLoaded")))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():
+0,o=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),k=[],i=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",function(b){j(b.target,"error"===b.type)}).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)j(a,e.isBroken);else if(a.complete&&a.naturalWidth!==n)j(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=l,a.src=d}):m();return d?d.promise(g):
+g}})(jQuery);