之前相册页面的后序

流产的相册页面

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

之前的效果

新的思路

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

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

相较我之前的想法来说更合理也更容易在Ghost上实现。

而后我查看了akina的相册插件,使用的是一款名为:baguetteBox的js插件,可以以顶层模态窗口的形式展示图片,并且有很多动画效果、支持多浏览器、支持针对不同分辨率展现不同的图片等等,具体情况可以点击左边github链接进去看看,现在用在我博客效果如下:

baguetteBox效果图

插件的使用

插件使用很简单,先在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相册 这里我想实现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上,一直显示不出来,害我查了好久。。。

1900

普通男青年,学过三年编程,目前在家里帮忙。2015年骑过一次318,有点伪文艺。性格多变,疑似有人格分裂。

四川自贡 http://www.4zen.top