之前相册页面的后序
流产的相册页面
之前有写过一篇文章：写了个相册页面，当时做了一个页面打算专门用来展示博客之内的所有图片。但是钻了牛角尖在处理后面获取文章内的图片数据时遇到了难题，并且我并不熟悉node.js的编写，也不熟悉Handlebars，对全英文的ghost的api文档更只是一知半解，所以苦于无法下手而搁置流产了。
新的思路
之前匿名者推荐过一个主题，作者是akina，但是是一个wordpress的主题，并不适用，在浏览作者博客时发现他的相册页面我似乎可以借鉴过来。总结了一下他的设计
- 相册以文章形式展示，并设置封面图。
- 相册文章设置特定类别用作和其他文章区分。
- 列表状态下展示文章特色图片
相较我之前的想法来说更合理也更容易在Ghost上实现。
而后我查看了akina的相册插件，使用的是一款名为：baguetteBox的js插件，可以以顶层模态窗口的形式展示图片，并且有很多动画效果、支持多浏览器、支持针对不同分辨率展现不同的图片等等，具体情况可以点击左边github链接进去看看，现在用在我博客效果如下：
插件的使用
插件使用很简单，先在head处导入js代码和css文件
<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>
并在需要实现效果的地方增加以下格式，图片被a链接包裹，链接href指向图片地址（这里可以设置为图片显示为缩略图，a链接的href指向原图）
<div class="gallery">
<a href="img/2-1.jpg" data-caption="Image caption">
<img src="img/thumbs/2-1.jpg" alt="First image">
</a>
<a href="img/2-2.jpg">
<img src="img/thumbs/2-2.jpg" alt="Second image">
</a>
...
</div>
之后再在网页底部编写js，在文档加载完之后初始化相册组件
<script type="text/javascript" >
baguetteBox.run('.gallery', {
// Custom options
});
</script>
适配实际情况
由于ghost使用了Handlebars做为模版语言，而我并不会做相关的后台代码编写所以只能在前台用js实现了。我的想法是在文档加载完之后获取文章主题内的所有img元素，并通过jquery的函数给每一个img标签增加a标签的父元素，并设置href属性。
function(){
$(".content img").each(function(){
$(this).wrap("<a href="+this.src+"></a>")
});
$(".content").addClass("gallery");
baguetteBox.run('.gallery', {animation: 'fadeIn'});
}
这里我想实现akina上的悬浮效果：鼠标悬浮的图片突出显示，其他图片淡化显示。但是我又不想让所有图片都这样，只有上传的系列图片时才做这样的显示。所以我这里在上面的代码中间增加了一个判断，因为上传图片时在ghost后台只能设置alt属性，所以我在系列图片的alt属性里增加一个字符G，并在增加完文章之后用jquery查询文章中所有alt中带G的图片，并用wrapAll函数将这些元素包裹在指定元素中。
if($("[alt='G']").length != 0){
$("[alt='G']").parent().wrapAll("<div class='ggrid'></div>");
}
并编写相关的CSS，这里利用的是not:hover这个元素实现的效果
.ggrid a{
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
-ms-transition:all 0.25s ease;
transition:all 0.25s ease;
}
.ggrid:hover a:not(:hover){
opacity:0.7;
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-webkit-transform:scale(0.9);
-o-transform:scale(0.9);transform:scale(0.9);
}
最后我这里实现的最终效果请查看这个页面。
最后
目前还有列表以块状展示的效果还没有实现，争取早点写好css。另外，这里虽然我已经在akina上留言说过我已经借鉴他的相关代码，但是还没有经过同意，我这算是先斩后奏了...如果不允许我只有再另外写了...
12月14日更新
!:如果想要显示图片说明信息需要设置a链接的title属性，官方文档写的不清不楚，搞的我把信息设置在img标签的alt上，一直显示不出来，害我查了好久。。。
加入评论