一加载文件
- <link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fancybox.min.CSS">
- <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
- <script src="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fancybox.min.js"></script>
二 html 代码参考
注: 为使特效生效, 用 a 标签包含 img 标签不是固定的, 可以用 li 或者 div, 重要的是需要让 img 父级标签的 rel 参数与 js 一致, 以及 href 参数与 img 的 src 参数一致
- <div>
- <a rel="group" href="images/b1.jpg" title="图片标题">
- <img alt=""src="images/s1.gif" />
- </a>
- <a rel="group" href="images/b2.jpg" title="图片标题">
- <img alt=""src="images/s2.gif" />
- </a>
- <a rel="group" href="images/b3.jpg" title="蓝天白云绿草">
- <img alt=""src="images/s3.gif" />
- </a>
- </div>
三 JavaScript 代码参考
注:$("a[rel=group]").fancybox({}); 中被选元素应与 img 父级标签类型相同, 如此处都为 a 标签
- $(function(){
- // 预览效果
- $("a[rel=group]").fancybox({
- titlePosition : over,
- cyclic : true,
- titleFormat : function(title, currentArray, currentIndex, currentOpts) {
- return <span id="fancybox-title-over"> + (currentIndex + 1) +
- / + currentArray.length + (title.length ? + title : ) + </span>;
- }
- });
- });
四第三方教程地址
https://www.helloweba.com/view-blog-65.html
来源: http://www.bubuko.com/infodetail-2514003.html