skywt
/
sky
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

加入 Fancybox 插件图片灯箱功能

This commit is contained in:
Skywt2003 2021-12-03 13:19:53 +08:00
parent 2398998eb7
commit 17ba907382
5 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
footer.php
View File

@ -11,6 +11,17 @@
$("article blockquote").addClass("shadow rounded");
$("article pre").addClass("shadow rounded");
$("table").addClass("table");
$(".aplayer").addClass("shadow");
});
/*
* Fancybox settings
* https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs
*/
$('[data-fancybox="gallery"]').fancybox({
buttons: ["zoom", "slideShow", "fullScreen", "download", "thumbs", "close"],
clickContent: function(current, event) {
return "close";
}
});
</script>

3
functions.php
View File

@ -161,6 +161,9 @@ function exContent($content){
$content = "<div id=\"tableOfContents\">{$toc_out}</div>". $content;
}
// Fancybox 图片灯箱
$content = preg_replace("/<img src=\"([^\"]*)\" alt=\"([^\"]*)\" title=\"([^\"]*)\">/i", "<a data-fancybox=\"gallery\" href=\"\\1\" data-caption=\"\\3\"><img src=\"\\1\" alt=\"\\2\" title=\"\\3\"></a>", $content);
return $content;
}

4
header.php
View File

@ -48,6 +48,10 @@
<!-- KaTeX css via jsDelivr-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">
<!-- fancybox js&css via jsDelivr-->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<?php $this->options->headerCode(); ?>
<?php $this->header(); ?>

4
index.php
View File

@ -28,7 +28,9 @@ if (!defined('__TYPECHO_ROOT_DIR__')) exit;
<?php while($this->next()): ?>
<article class="mt-5 mb-5" itemscope itemtype="http://schema.org/BlogPosting">
<?php if ($this->fields->headPic !=''): ?>
<img src=<?php $this->fields->headPic(); ?> class="img-fluid mx-auto d-block shadow rounded mb-3" alt="<?php $this->title(); ?>">
<a data-fancybox="gallery" href="<?php $this->fields->headPic(); ?>" data-caption="<?php $this->title(); ?>">
<img src=<?php $this->fields->headPic(); ?> class="img-fluid mx-auto d-block shadow rounded mb-3" alt="<?php $this->title(); ?>" title="<?php $this->title(); ?>">
</a>
<?php endif; ?>
<div>
<h1 class="font-weight-bold post-title" itemprop="name headline">

4
post.php
View File

@ -8,7 +8,9 @@
<div class="col mt-5" id="main" role="main">
<article>
<?php if ($this->fields->headPic !=''): ?>
<img src=<?php $this->fields->headPic(); ?> class="img-fluid mx-auto d-block shadow rounded mb-3" alt="<?php $this->title(); ?>">
<a data-fancybox="gallery" href="<?php $this->fields->headPic(); ?>" data-caption="<?php $this->title(); ?>">
<img src=<?php $this->fields->headPic(); ?> class="img-fluid mx-auto d-block shadow rounded mb-3" alt="<?php $this->title(); ?>" title="<?php $this->title(); ?>">
</a>
<?php endif; ?>
<h1 class="font-weight-bold post-title"><?php $this->title() ?></h1>
<div>