CDEFGAB 1010110

挖了太多坑，一点点填回来

给博客写了个 Fancybox 的插件

Posted by CaiKnife jquery, js, octopress, ruby

octopress 默认没有放大图片的效果，今天用 fancybox 做了一个插件扩展。

首先从 http://fancyapps.com/fancybox/#license 下载最新版的 fancybox ，解压缩后复制 source 目录到 octopress 的 javascripts 目录下。

打开文件 /source/_includes/custom/head.html ，在最后增加一条语句：

/source/_includes/custom/head.html
1

{% include fancybox.html %}

然后建立文件 /source/_includes/fancybox.html ，加入以下内容：

/source/_includes/fancybox.html
1
2
3
4
5
6
7

<script src="/javascripts/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/javascripts/fancybox/jquery.fancybox.css" />
<script type="text/javascript">
(function($){
    $('.fancybox').fancybox();
})(jQuery);
</script>

下面的重头戏就是增加一个 fancybox 的标签。创建文件 /plugins/fancybox_tag.rb ，详细代码如下：

/plugins/fancybox_tag.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

#coding: utf-8

module Jekyll

  # Usage:
  # {% fancybox @filename [thumb:@thumb] [@title] %}
  # {% fancybox @filename [@title] %}

  class FancyboxTag < Liquid::Tag
    def initialize(tag_name, markup, tokens)
      #  /(?<filename>\S+)(?:\s+(?<thumb>\S+))?(?:\s+(?<title>.+))?/i
      #  /(?<filename>\S+)(?:\s+(?<title>.+))?/i
      if /(?<filename>\S+)(?:\s+thumb:(?<thumb>\S+))?(?:\s+(?<title>.+))?/i =~ markup
        @filename = filename
        @thumb = thumb
        @title = title
      end
    end

    def render(context)
      if @filename
        "<a href=\"#{@filename}\" title=\"#{@title}\" class=\"fancybox\"><img src=\"#{thumb_for(@filename, @thumb)}\" alt=\"#{@title}\" /></a>"
      else
        "Error. Usage: {% fancybox @filename [thumb:@thumb] [@title] %}"
      end
    end

    def thumb_for(filename, thumb)
      if thumb.nil?
        filename
      else
        thumb
      end
    end

  end

end

Liquid::Template.register_tag('fancybox', Jekyll::FancyboxTag)

使用方法在注释里有介绍，很简单。

Have a nice day！