为网站添加FancyBox 实现图片灯箱效果

avatar
avatar
小王先森
386
文章
383
评论
2020年5月21日 2 344

FancyBox 是一款优秀的弹出框 Jquery 插件,网站上使用它看图片杠杠的,效果很好。

功能介绍

1、允许我们用鼠标和键盘上的四个方向键切换图片。

2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放。

3、支持缩略图列表、放大、全屏等功能。

4、弹出框支持显示多种类型的内容:图片、html、视频…

5、支持触控、缩放手势操作图片。

使用方法

1、引入相关文件

这里可以找到最新的:https://www.bootcdn.cn/

<script src="jquery.min.js"></script>
<link href="jquery.fancybox.min.css" rel="stylesheet">
<script src="jquery.fancybox.min.js"></script>

2、增加 data-fancybox 属性

(1)HTML 内容

<div id="gallery">
<ul>
    <li><img src="demo1.jpg" alt="图片描述1" /></li>
    <li><img src="demo2.jpg" alt="图片描述2" /></li> 
</ul> 
</div>

(2)自动获取标签,为标签添加 a 元素

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

})
</script>

3、初始化 fancybox

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

一切加载完成后,就可以初始化 FancyBox 了,在引入的 FancyBox 的 js、css 文件下面增加。

继续阅读
avatar
  • 本文由 发表于 2020年5月21日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • avatar 站元素虚拟主机 1

      看着很不错~