之前相册页面的后序

之前相册页面的后序

December 13, 2016

流产的相册页面

之前有写过一篇文章:写了个相册页面,当时做了一个页面打算专门用来展示博客之内的所有图片。但是钻了牛角尖在处理后面获取文章内的图片数据时遇到了难题,并且我并不熟悉 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 上,一直显示不出来,害我查了好久。。。

加入评论