文章目录
  1. 1. 下载资源文件
  2. 2. 引入资源文件
  3. 3. 使用

本文主要讲解如何在Octopress中支持图片点击放大，使用了 fancyBox 插件。

下载资源文件

直接从官网下载资源文件：http://fancyapps.com/fancybox/#license

下载完成之后再 source 目录下创建文件夹 fancybox，然后把下载的资源文件按下图的目录结构拷贝进来

然后在 source/javascripts 目录下创建文件 FancyBoxLocal.js，代码如下：

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
41
42
43
44
45
46
47
$(document).ready(function() {
  $('.entry-content').each(function(i){
    var _i = i;
    $(this).find('img.fancybox').each(function(){
      var img = $(this);
      var title = img.attr("title");
      img.removeClass("fancybox");
      img.wrap('<a href="'+this.src+'" class="fancybox" rel="gallery'+_i+'" />');
      if (title != "") {
	     img.parent().attr("title", title);
      }
    });
    $(this).find('picture.fancybox').each(function(){
      var picture = $(this);
      var title = picture.attr("title");
      picture.removeClass("fancybox");
      var url = picture.children("source").eq(0).attr("srcset");
      picture.wrap('<a href="'+url+'" class="fancybox" rel="galleryp'+_i+'" />');
      if (title != "") {
	     picture.parent().attr("title", title);
      }
    });
  });
  $(".fancybox").fancybox({
    prevEffect : 'none',
    nextEffect : 'none',
  });
  $('.fancybox-media')
  .attr('rel', 'media-gallery')
  .fancybox({
	    openEffect : 'none',
	    closeEffect : 'none',
	    prevEffect : 'none',
	    nextEffect : 'none',
	
	    arrows : false,
	    helpers : {
	    media : {},
	    buttons : {}
    }
  });
  $(".cliwide").fancybox();
});

引入资源文件

打开文件：source/_includes/custom/after_footer.html，并添加以下代码

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!-- Defer loading of JavaScripts -->
<script type="text/javascript" charset="utf-8">
(function() {
	function getScript(url,success){
		var script=document.createElement('script');
		script.src=url;
		var head=document.getElementsByTagName('head')[0],
				done=false;
		script.onload=script.onreadystatechange = function(){
			if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
				done=true;
				success();
				script.onload = script.onreadystatechange = null;
				head.removeChild(script);
			}
		};
		head.appendChild(script);
	}
	
	getScript("//ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js",function(){
		getScript("/javascripts/octopress.js",function() {});
		getScript("/fancybox/source/jquery.fancybox.pack.js?v=2.1.5", function() {
			getScript("/fancybox/source/helpers/all.js", function() {
				getScript("/javascripts/FancyBoxLocal.js", function() {});
			});
		});
	});
})();
var cb = function() {
  // CSS files for FancyBox
  var fbcss = document.createElement("link");
  fbcss.href = "/fancybox/source/jquery.fancybox.css?v=2.1.5";
  fbcss.rel = "stylesheet";
  fbcss.type = "text/css";
  fbcss.media = "screen, projection";
  document.body.appendChild(fbcss);
  var fbbtncss = document.createElement("link");
  fbbtncss.href = "/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5";
  fbbtncss.rel = "stylesheet";
  fbbtncss.type = "text/css";
  fbbtncss.media = "screen, projection";
  document.body.appendChild(fbbtncss);
  var fbthmcss = document.createElement("link");
  fbthmcss.href = "/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7";
  fbthmcss.rel = "stylesheet";
  fbthmcss.type = "text/css";
  fbthmcss.media = "screen, projection";
  document.body.appendChild(fbthmcss);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>

到这一步已经大功告成了！

使用

直接在 img 后面加上 fancybox 即可，语法如下：

1
{% img fancybox [path] [title] %}

  • path - 图片的路径或链接地址，如：/images/2016/03/fanybox_source_path.png
  • title - 标题(可选项)，点击图片放大后会显示在图片的下方