hexo-theme-quiet/layout/_partial/post_centent.ejs

60 lines
1.3 KiB
Plaintext

<div class="post-content" id="content">
<div id="article" class="post-content-info">
<%- page.content %>
</div>
<div id="<%- page.comments ? 'gitalk-container' : ''%>"></div>
</div>
<script>
Fancybox.bind('[data-fancybox="fancybox-gallery-img"]', {
dragToClose: true,
Toolbar: true,
closeButton: "top",
Image: {
zoom: true,
},
on: {
initCarousel: (fancybox) => {
const slide = fancybox.Carousel.slides[fancybox.Carousel.page];
fancybox.$container.style.setProperty(
"--bg-image",
`url("${slide.$thumb.src}")`
);
},
"Carousel.change": (fancybox, carousel, to, from) => {
const slide = carousel.slides[to];
fancybox.$container.style.setProperty(
"--bg-image",
`url("${slide.$thumb.src}")`
);
},
},
});
</script>
<style>
#noneimg img {
display: none;
z-index: 9999;
/* width: 600px !important; */
min-width: 0%;
max-width: 90%;
max-height: 80%;
border-radius: 0px;
position: fixed;
box-shadow: 0 0 0px #c3c3c300 !important;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto !important;
}
@media screen and (max-width:600px) {
#noneimg img {
max-width: 88%
}
}
</style>