利用FancyBox给你的网站添加图片灯箱效果

  • 2020 年 02 月 22 日
  • 736
  • 219 字
  • 暂无评论


Fancybox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽。

Fancybox 是一款很绚丽的 jquery 弹出层展示插件,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。

引入相关文件

可以将FancyBox的js、css文件下载到主题目录中进行引入,这里我们直接使用 CDN 外链

请先在 header.php 文件的 head 标签前引入 Jquery 文件

<script type='text/javascript' src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>

如果已经引入了jquery可以跳过这步,然后在 footer.php 文件的标签前引入 FancyBox 的 js、css 文件

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />
<script type="text/javascript" src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"></script>

增加 data-fancybox 属性

<script>
$(function() {
   $(".entry-content p img").each(function(i) {
      if (!this.parentNode.href) {
         $(this).wrap("<a href='" + this.src + "' data-fancybox='fancybox' data-caption='" + this.alt + "'></a>")
      }
   })
});
</script>

.entry-content p img 可以根据你所在图片的div元素CSS类进行修改,将上面 js 代码加入到 header.php 或 footer.php 文件中

初始化 fancybox

<script>
$(document).ready(function() {
   $("[data-fancybox]").fancybox()
});
</script>

将上面代码添加到fancybox下面,最后测试图片是否能正常点击。

文章转载于:https://www.cnblogs.com/huliuwa/p/12028900.html


版权属于:Zero

本文链接:https://7vm.cn/archives/20.html


分享海报

—— 暂无评论 ——

OωO