文章目录
  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 - 标题(可选项),点击图片放大后会显示在图片的下方