流产的相册页面

之前有写过一篇文章：写了个相册页面，当时做了一个页面打算专门用来展示博客之内的所有图片。但是钻了牛角尖在处理后面获取文章内的图片数据时遇到了难题，并且我并不熟悉node.js的编写，也不熟悉Handlebars，对全英文的ghost的api文档更只是一知半解，所以苦于无法下手而搁置流产了。

新的思路

之前匿名者推荐过一个主题，作者是akina，但是是一个wordpress的主题，并不适用，在浏览作者博客时发现他的相册页面我似乎可以借鉴过来。总结了一下他的设计

1. 相册以文章形式展示，并设置封面图。
2. 相册文章设置特定类别用作和其他文章区分。
3. 列表状态下展示文章特色图片

相较我之前的想法来说更合理也更容易在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上，一直显示不出来，害我查了好久。。。