宁波网站建设咨询:宁波网站建设
13780026116 宁波网站制作
网站公告
PHP技术
技术交流
网络推广
网站建设常见问答
殷雯动态
你的位置:首页> 新闻/观点 > 技术交流>jquery.fancybox网页弹窗插件
技术交流
jquery.fancybox网页弹窗插件

jquery.fancybox网页弹窗插件

jquery.fancybox  是一个好用方便的网页弹窗插件。

fancyBox3 中文文档

译文永久地址:https://kangkai124.github.io/fancybox/

说明:本文档仅供参考,更新不及时请查看官方文档

1. 介绍

fancyBox是一个JavaScript库,它以优雅的方式展示图片,视频和一些html内容。它包含你所期望的一切特性—支持手势,响应式和高度自定义。

1.1 依赖

推荐jQuery 3+,但是fancyBox仍支持jQery 1.9.1+和jQuery 2+。

注意

如果你在图片缩放时遇到了问题,请升级jQuery到最近版本(至少v3.2.1)。

1.2 兼容

fancyBox支持触摸操作,而且支持缩放等手势操作。对移动端和PC端都十分合适。

2. 配置

可以通过引入.css.js到html文档中来使用fancyBox。确保在这之前引入了jQuery库。下面是使用fancyBox的一个基本的HTML模板:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My page</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

    <!-- Your HTML content goes here -->

    <!-- JS -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>
</body>
</html>

2.1 下载fancyBox

可以在GIthub下载最新的版本。

或者直接引用cdnjs—https://cdnjs.com/libraries/fancybox

插件还提供了一些在线安装的方法,小编还没有用过就不介绍了。

3. 使用

3.1 使用data属性初始化

最基本的用法是通过添加data-fancybox属性到一个超链接标签。标题可以通过data-capiton添加。例如:

<a href="image.jpg" data-fancybox data-caption="My caption">
    <img src="thumbnail.jpg" alt="" />
</a>

3.2 使用JavaScript初始化

使用jQuery选择器选择一个元素,然后调用fancybox方法:

<script type="text/javascript">
    $("[data-fancybox]").fancybox({
        // Options will go here
    });
</script>

使用这种方式,只有被选中的元素才可以触发点击事件。

为了可以现在或之后存在的元素都可以触发点击事件,使用selector选项。例如:

$().fancybox({
  selector : '[data-fancybox="images"]',
  loop     : true
});

如果你有一组元素,组内元素使用相同的data-fancybox值就可以组成一个相册。不同的组应该使用不同的属性值加以区分。


fancybox支持的媒体类型:imgeas,video,ajax ,iframe 一般都会自动判断。 也可以手工指定。 一般的用户以上信息即可应用。


点击:  1235    时间: 2023-02-27
上一条: 行业趋势
下一条:
 
 
快速通道: 关于我们    网站建设    主机域名    付款方式    我的声明
  
联系我们
手机扫描QQ
网站建设咨询:
咨询热线:
宁波殷雯网站建设工作室
地 址: 浙江省宁波市江东区
电 话: 13780026116 
邮 箱:
waichun@qq.com
宁波网站建设
宁波网站制作
13780026116
宁波殷雯网站建设工作室 版权所有   浙ICP备16030041号-1