From 46c8d30cf6b3390c8dec6776c43f9c5e552d66a7 Mon Sep 17 00:00:00 2001 From: Tommy Chen Date: Thu, 6 Dec 2012 14:39:16 +0800 Subject: [PATCH] Added photo, link layout. Fixed Fancybox --- layout/_partial/after_footer.ejs | 9 +++- layout/_partial/article.ejs | 5 ++- layout/_partial/post/gallery.ejs | 15 +++++++ layout/_partial/post/title.ejs | 4 +- source/css/_partial/article.styl | 58 ++++++++++++++++++++++++- source/js/caption.js | 15 ------- source/js/gallery.js | 65 ++++++++++++++++++++++++++++ source/js/jquery.imagesloaded.min.js | 3 ++ 8 files changed, 153 insertions(+), 21 deletions(-) create mode 100644 layout/_partial/post/gallery.ejs delete mode 100644 source/js/caption.js create mode 100644 source/js/gallery.js create mode 100644 source/js/jquery.imagesloaded.min.js diff --git a/layout/_partial/after_footer.ejs b/layout/_partial/after_footer.ejs index b45b0ca..ea8aed1 100644 --- a/layout/_partial/after_footer.ejs +++ b/layout/_partial/after_footer.ejs @@ -1,3 +1,6 @@ + + + <% if (config.disqus_shortname){ %> - + <% } %> <%- partial('phasebeam') %> \ No newline at end of file diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs index cbe3685..bca24ce 100644 --- a/layout/_partial/article.ejs +++ b/layout/_partial/article.ejs @@ -1,4 +1,7 @@ -
+
+ <% if (item.photos){ %> + <%- partial('post/gallery') %> + <% } %>
<%- partial('post/title') %> <% if (item.layout == 'post'){ %><%- partial('post/date') %><% } %> diff --git a/layout/_partial/post/gallery.ejs b/layout/_partial/post/gallery.ejs new file mode 100644 index 0000000..01d0c1b --- /dev/null +++ b/layout/_partial/post/gallery.ejs @@ -0,0 +1,15 @@ +
+
+ <% if (item.photos.length){ %> + <% item.photos.forEach(function(photo){ %> + + <% }); %> + <% } else { %> + + <% } %> +
+
+ + +
+
\ No newline at end of file diff --git a/layout/_partial/post/title.ejs b/layout/_partial/post/title.ejs index ea1de65..d294f2d 100644 --- a/layout/_partial/post/title.ejs +++ b/layout/_partial/post/title.ejs @@ -1,8 +1,8 @@ <% if (item.link){ %> <% if (item.title){ %> -

<%= item.title %>

+

<%= item.title %>

<% } else { %> -

<%= item.link %>

+

<%= item.link %>

<% } %> <% } else { %> <% if (index){ %> diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl index 52c28e6..dbd1c8f 100644 --- a/source/css/_partial/article.styl +++ b/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 "" diff --git a/source/js/caption.js b/source/js/caption.js deleted file mode 100644 index cd29692..0000000 --- a/source/js/caption.js +++ /dev/null @@ -1,15 +0,0 @@ -(function($){ - $('.entry').each(function(i){ - $(this).find('img').each(function(){ - var alt = this.alt; - - if (alt){ - $(this).after('' + alt + ''); - } - - $(this).wrap(''); - }); - }); - - $('.fancybox').fancybox(); -})(jQuery); \ No newline at end of file diff --git a/source/js/gallery.js b/source/js/gallery.js new file mode 100644 index 0000000..2a54fa2 --- /dev/null +++ b/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('' + alt + ''); + } + + $(this).wrap(''); + }); + }); + + // 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); \ No newline at end of file diff --git a/source/js/jquery.imagesloaded.min.js b/source/js/jquery.imagesloaded.min.js new file mode 100644 index 0000000..bc56220 --- /dev/null +++ b/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);