官网地址

http://fancyapps.com/fancybox/3/
document:http://fancyapps.com/fancybox/3/docs/#usage

github

https://github.com/fancyapps/fancybox

兼容性

# jquery
jQuery 3+ 推荐, 但 fancybox 仍可以在 jQuery 1.9.1+ and jQuery 2+ 上运行

# 浏览器兼容
Chrome
Firefox
IE10/11
Edge
iOS Safari
Android 7.0 Tablet

使用方式

<!-- 1. Add latest jQuery and fancybox files -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
</head>
<body>

<a data-fancybox="gallery" href="1.jpg"><img src="1.jpg"></a>
<a data-fancybox="gallery" href="2.jpg"><img src="2.jpg"></a>
<a data-fancybox="gallery" href="3.jpg"><img src="3.jpg"></a>
<a data-fancybox="gallery" href="4.jpg"><img src="4.jpg"></a>
<a data-fancybox="gallery" href="5.jpg"><img src="5.jpg"></a>
<a data-fancybox="gallery" href="6.jpg"><img src="6.jpg"></a>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

</body>
</html>

demo

jquery validate自定义验证规则

jQuery.validator.addMethod("check_user", function(value, element) { var check = /^[A-Za-z\s]+$/; //this.optional(element)如果元素...

阅读全文

jquery 瀑布流插件 masonry

github https://github.com/desandro/masonry Masonry Cascading grid layout library Masonry works by placing elements in optimal position based on a...

阅读全文

一款非常好用的jquery滚动条样式插件 jquery.nicescroll

github地址 demo 使用方法 //默认 $(".do-nicescrol").niceScroll(); // $(".do-nicescrol").niceScroll({ cursorcolor:"aquam...

阅读全文

欢迎留言