这次给大家带来JQuery的FancyBox插件做出图片展示功能，FancyBox插件做出图片展示功能的注意事项有哪些，下面就是实战案例，一起来看一下。
FancyBox是一个用于显示图像，HTML内容和多媒体的lightbox工具。
jquery插件之fancybox弹出框特效，与广为人之的lightbox插件比较类拟,可以展示单张图片，也可展示一组图片，它还可以展示自定义的内容与ajax载入外部文件的内容等，功能也是很方便与实用的。
Demo effect(image gallery):
Sample code:
First test(Image gallery)
登录后复制
$(document).ready(function () { $(".fancybox1").fancybox(); });
登录后复制
Demo effect(single images):
Sample code:
Single images
登录后复制
$(document).ready(function () { $("#single_1").fancybox({ helpers: { title: { type: 'float' } } }); $("#single_2").fancybox({ openEffect: 'elastic', closeEffect: 'elastic', helpers: { title: { type: 'inside' } } }); $("#single_3").fancybox({ openEffect: 'none', closeEffect: 'none', helpers: { title: { type: 'outside' } } }); $("#single_4").fancybox({ helpers: { title: { type: 'over' } } }); });
登录后复制
Demo effect(thumbnail):
Sample code:
Thumbnail helper
登录后复制
$(document).ready(function () { $(".fancybox-thumb").fancybox({ prevEffect: 'elastic', nextEffect: 'elastic', helpers: { title: { type: 'inside' }, thumbs: { width: 50, height: 50 } } }); });
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jquery+php实现动态数字显示效果
jQuery动画效果图片轮播实现（附代码）
以上就是JQuery的FancyBox插件做出图片展示功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2768758.html
