iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fancybox

Browse Source
master
xaoxuu 4 years ago
parent 56d3f299a4
commit 2612d517a2
4 changed files with 98 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      layout/_third-party/fancybox.ejs
  2. 4
      scripts/tags/fancybox.js
  3. 21
      scripts/tags/image.js
  4. 79
      source/css/_third-party/fancybox.styl

53
layout/_third-party/fancybox.ejs vendored
Unescape View File

@ -1,18 +1,43 @@
<script src="<%- theme.plugins.fancybox.js %>"></script> <script src="<%- theme.plugins.fancybox.js %>"></script>
<script> <script>
let LAZY_LOAD_IMAGE = "<%- config.lazyload %>"; function pjax_fancybox() {
$(".article-entry").find("div.fancybox").find("img").each(function () { let LAZY_LOAD_IMAGE = "<%- config.lazyload %>";
var element = document.createElement("a"); $(".article-entry").find("img").not('.inline').not('a img').each(function () { //渲染 fancybox
$(element).attr("data-fancybox", "gallery"); var element = document.createElement("a"); // a 标签
$(element).attr("href", $(this).attr("src")); $(element).attr("pjax-fancybox", ""); // 过滤 pjax
/* 图片采用懒加载处理时, if (LAZY_LOAD_IMAGE) {
* 一般图片标签内会有个属性名来存放图片的真实地址，比如 data-original, $(element).attr("href", $(this).attr("data-original"));
* 那么此处将原本的属性名src替换为对应属性名data-original, }
* 修改如下 $(element).attr("data-fancybox", "images");
*/ var caption = ""; // 描述信息
if (LAZY_LOAD_IMAGE) { if ($(this).attr('alt')) { // 标准 markdown 描述信息
$(element).attr("href", $(this).attr("data-original")); $(element).attr('data-caption', $(this).attr('alt'));
} caption = $(this).attr('alt');
$(this).wrap(element); }
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> </script>

4
scripts/tags/fancybox.js
Unescape View File

@ -5,11 +5,11 @@ function postFancybox(args, content) {
var cls = args[0]; var cls = args[0];
var col = Number(args[1]) || 0; var col = Number(args[1]) || 0;
if (col > 0) { if (col > 0) {
return `<div class="fancybox ${cls}" col='${col}'> return `<div class="gallery ${cls}" col='${col}'>
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>`; </div>`;
} else { } else {
return `<div class="fancybox ${cls}"> return `<div class="gallery ${cls}">
${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
</div>`; </div>`;
} }

21
scripts/tags/image.js
Unescape View File

@ -5,10 +5,13 @@ function postImage(args) {
let url = (args[0]||'').trim() let url = (args[0]||'').trim()
let title = '' let title = ''
let width = '' let width = ''
let cls = ''
function getP2(p2) { function getP2(p2) {
let px = p2.match(/^[0-9]*px$/g) let px = p2.match(/^[0-9]*px$/g)
if (px) { if (px) {
width = px[0] width = px[0]
} else if (p2 == 'inline') {
cls = 'class="inline"'
} else { } else {
title = p2 title = p2
} }
@ -21,25 +24,15 @@ function postImage(args) {
} }
if (width.length > 0) { if (width.length > 0) {
if (title.length > 0) { if (title.length > 0) {
return `<div class="fancybox caption"> return `<img src='${url}' alt='${title}' style='width:${width}'>`;
<img src='${url}' style='width:${width}'>
<span class='image-caption'>${title}</span>
</div>`;
} else { } else {
return `<div class="fancybox caption"> return `<img src='${url}' style='width:${width}'>`;
<img src='${url}' style='width:${width}'>
</div>`;
} }
} else { } else {
if (title.length > 0) { if (title.length > 0) {
return `<div class="fancybox caption"> return `<img src='${url}' alt='${title}'>`;
<img src='${url}'>
<span class='image-caption'>${title}</span>
</div>`;
} else { } else {
return `<div class="fancybox caption"> return `<img src='${url}'>`;
<img src='${url}'>
</div>`;
} }
} }
} }

79
source/css/_third-party/fancybox.styl vendored
Unescape View File

@ -1,42 +1,51 @@
div.fancybox div.gallery
margin: $gap-row 0 margin: $gap-row 0
overflow: hidden overflow: hidden
$sp = 1px $sp = 1px
>a,>p>a >.fancybox,>p>.fancybox
margin: $sp margin: $sp
padding: 0 padding: 0
line-height: 0 position: relative
overflow: hidden .image-caption
align-items: stretch opacity: 0
border-radius: 2px transform: translateY(100%)
cursor: zoom-in transition: all 0.3s ease
@media screen and (max-width: $device-mobile) pointer-events: none
border-radius: 1px position: absolute
width: 100%
br bottom: 0
display: none !important text-align: center
background: rgba(0, 0, 0, 0.3)
color: #fff
&:empty
display:none
&:hover
.image-caption
opacity: 1
transform: translateY(0)
&,>p &,>p
display: flex display: flex
justify-content: center justify-content: center
align-items: center align-items: center
flex-wrap: nowrap flex-wrap: nowrap
padding: 0 !important padding: 0 !important
align-items: stretch
&[col]>p &[col]>p
flex-wrap: wrap flex-wrap: wrap
justify-content: flex-start justify-content: flex-start
&[col='2']>p>a &[col='2']>p>.fancybox
width: "calc(50% - 2 * %s)" % $sp width: "calc(50% - 2 * %s)" % $sp
&[col='3']>p>a &[col='3']>p>.fancybox
width: "calc(33.33% - 2 * %s)" % $sp width: "calc(33.33% - 2 * %s)" % $sp
&[col='4']>p>a &[col='4']>p>.fancybox
width: "calc(25% - 2 * %s)" % $sp width: "calc(25% - 2 * %s)" % $sp
&[col='5']>p>a &[col='5']>p>.fancybox
width: "calc(20% - 2 * %s)" % $sp width: "calc(20% - 2 * %s)" % $sp
&[col='6']>p>a &[col='6']>p>.fancybox
width: "calc(16.66% - 2 * %s)" % $sp width: "calc(16.66% - 2 * %s)" % $sp
&[col='7']>p>a &[col='7']>p>.fancybox
width: "calc(14.2857% - 2 * %s)" % $sp width: "calc(14.2857% - 2 * %s)" % $sp
&[col='8']>p>a &[col='8']>p>.fancybox
width: "calc(12.5% - 2 * %s)" % $sp width: "calc(12.5% - 2 * %s)" % $sp
>p >p
margin: 0 margin: 0
@ -56,13 +65,25 @@ div.fancybox
cursor: zoom-out cursor: zoom-out
.fancybox .fancybox
&.caption display: flex
flex-direction: column flex-direction: column
a justify-content: center
margin: 0 align-items: center
.gallery flex-wrap: nowrap
overflow: hidden padding: 0 !important
.image-caption overflow: hidden
font-size: $fontsize-code border-radius: 2px
margin-top: $gap-row @media screen and (max-width: $device-mobile)
color: $color-meta border-radius: 1px
a
line-height: 0
margin: 0
align-items: stretch
cursor: zoom-in
.gallery
overflow: hidden
.image-caption
font-size: $fontsize-code
padding-top: $gap-row
padding-bottom: $gap-row
color: $color-meta

Write Preview
Loading…
Cancel
Save