xaoxuu
4 years ago
parent
56d3f299a4
commit
2612d517a2
4 changed files with 98 additions and 59 deletions
@ -1,18 +1,43 @@ |
||||
<script src="<%- theme.plugins.fancybox.js %>"></script> |
||||
<script> |
||||
let LAZY_LOAD_IMAGE = "<%- config.lazyload %>"; |
||||
$(".article-entry").find("div.fancybox").find("img").each(function () { |
||||
var element = document.createElement("a"); |
||||
$(element).attr("data-fancybox", "gallery"); |
||||
$(element).attr("href", $(this).attr("src")); |
||||
/* 图片采用懒加载处理时, |
||||
* 一般图片标签内会有个属性名来存放图片的真实地址，比如 data-original, |
||||
* 那么此处将原本的属性名src替换为对应属性名data-original, |
||||
* 修改如下 |
||||
*/ |
||||
if (LAZY_LOAD_IMAGE) { |
||||
$(element).attr("href", $(this).attr("data-original")); |
||||
} |
||||
$(this).wrap(element); |
||||
function pjax_fancybox() { |
||||
let LAZY_LOAD_IMAGE = "<%- config.lazyload %>"; |
||||
$(".article-entry").find("img").not('.inline').not('a img').each(function () { //渲染 fancybox |
||||
var element = document.createElement("a"); // a 标签 |
||||
$(element).attr("pjax-fancybox", ""); // 过滤 pjax |
||||
if (LAZY_LOAD_IMAGE) { |
||||
$(element).attr("href", $(this).attr("data-original")); |
||||
} |
||||
$(element).attr("data-fancybox", "images"); |
||||
var caption = ""; // 描述信息 |
||||
if ($(this).attr('alt')) { // 标准 markdown 描述信息 |
||||
$(element).attr('data-caption', $(this).attr('alt')); |
||||
caption = $(this).attr('alt'); |
||||
} |
||||
var div = document.createElement("div"); |
||||
$(div).addClass("fancybox"); |
||||
$(this).wrap(div); // 最外层套 div ，其实主要作用还是 class 样式 |
||||
var span = document.createElement("span"); |
||||
$(span).addClass("image-caption"); |
||||
$(span).text(caption); // 加描述 |
||||
$(this).after(span); // 再套一层描述 |
||||
$(this).wrap(element); // 最后套 a 标签 |
||||
}) |
||||
$(".article-entry").find("img").fancybox({ |
||||
selector: '[data-fancybox="images"]', |
||||
hash: false, |
||||
loop: false, |
||||
closeClick: true, |
||||
helpers: { |
||||
overlay: {closeClick: true} |
||||
}, |
||||
buttons: [ |
||||
"zoom", |
||||
"close" |
||||
] |
||||
}); |
||||
}; |
||||
$(function () { |
||||
pjax_fancybox(); |
||||
}); |
||||
</script> |
||||
|
||||
Loading…
Reference in new issue