Fancybox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽
Fancybox 是一款很绚丽的 jquery 弹出层展示插件，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观

官网上并未发现相关插件，而我这个主题也未集成

于是乎，翻了下fancybox文档，发现很容易，只是加个标签，调用js就行了

indigo-card 主题使用方法

我是直接替换了indigo-card主题的lightbox的render

修改themes/indigo-card/plugins.js文件

找到function renderImage(src, alt = '', title = '') {，替换为以下内容

1
2
3
4
5
6
7
function renderImage(src, alt = '', title = '') {
    return `<figure class="image-bubble">
                <a data-fancybox="gallery" rel="group1 noopener" href="${src}" target="_blank">
	                <img data-action="zoom" src="${src}" alt="${alt}">
                 </a>
            </figure>`
}

引入官方fancybox的js和css

下载:https://github.com/fancyapps/fancybox

我们只用到jquery.fancybox.min.css和jquery.fancybox.min.js

修改themes/indigo-card/layout/_partial/script.ejs文件

底部插入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<link rel="stylesheet" href="<%- url_for('css/jquery.fancybox.min.css') %>" media="all">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="<%- url_for('js/jquery.fancybox.min.js') %>"></script>
<script>
$('[data-fancybox="images"]').fancybox({//可选
    thumbs : {
    	autoStart : true //缩略图
    }
});
$('[data-fancybox]').fancybox({//启用函数，必须
	protect: true //图片右键不能下载，可选
});
</script>

重新编译运行即可查看效果

hexo s -g

任意主题使用方法

引入官方fancybox的js和css

下载:https://github.com/fancyapps/fancybox

我们只用到jquery.fancybox.min.css和jquery.fancybox.min.js

找到主题themes/xxx/layout/下相关的footer文件

底部插入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<link rel="stylesheet" href="<%- url_for('css/jquery.fancybox.min.css') %>" media="all">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="<%- url_for('js/jquery.fancybox.min.js') %>"></script>
<script>
$('[data-fancybox="images"]').fancybox({//可选
    thumbs : {
    	autoStart : true //缩略图
    }
});
$('[data-fancybox]').fancybox({//启用函数，必须
	protect: true //图片右键不能下载，可选
});
</script>

使用全局render方法

打开node_modules\marked\lib\marked.js文件

Ctrl+F 搜索 Renderer.prototype.image 函数，修改如下

1
2
3
4
5
6
7
8
9
10
11
Renderer.prototype.image = function(href, title, text) {
    if (this.options.baseUrl && !originIndependentUrl.test(href)) {
        href = resolveUrl(this.options.baseUrl, href);
    }
    var out = '<a data-fancybox="gallery" data-caption="'+text+'" href="'+href+'"><img data-action="zoom" src="' + href + '" alt="' + text + '"';
    if (title) {
        out += ' title="' + title + '"';
    }
    out += this.options.xhtml ? '/></a>' : '></a>';
    return out;
};

重新编译运行即可查看效果

hexo s -g