使用JQuery FancyBox插件实现图片展示特效
发布时间:2020-12-14 22:49:34 所属栏目:资源 来源:网络整理
导读:FancyBox是一个用于显示图像,HTML内容和多媒体的lightbox工具。 jquery插件之fancybox弹出框特效,与广为人之的lightbox插件比较类拟,可以展示单张图片,也可展示一组图片,它还可以展示自定义的内容与ajax载入外部文件的内容等,功能也是很方便与实用的。
FancyBox是一个用于显示图像,HTML内容和多媒体的lightbox工具。 jquery插件之fancybox弹出框特效,与广为人之的lightbox插件比较类拟,可以展示单张图片,也可展示一组图片,它还可以展示自定义的内容与ajax载入外部文件的内容等,功能也是很方便与实用的。 Demo effect(image gallery): Sample code: <link href="~/Content/jquery.fancybox.css" rel="stylesheet" /> <p> <h2>First test(Image gallery)</h2> <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg"><img src="/uploads/201709/13/15052950642.jpg" alt="" /></a> <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"><img src="/uploads/201709/13/15052950643.jpg" alt="" /></a> </p> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/jquery.fancybox.pack.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".fancybox1").fancybox(); }); </script> Demo effect(single images): Sample code: <link href="~/Content/jquery.fancybox.css" rel="stylesheet" /> <p> <h2>Single images</h2> <a id="single_1" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg" title="Lupines (Kiddi Einars)"> <img src="/uploads/201709/13/15052950643.jpg" alt="" /> </a> <a id="single_2" href="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_b.jpg" title="Colorful Feldberg II (STEFFEN EGLY)"> <img src="/uploads/201709/13/15052950666.jpg" alt="" /> </a> <a id="single_3" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg" title="Cannon Needles (JustinPoe)"> <img src="/uploads/201709/13/15052950677.jpg" alt="" /> </a> <a id="single_4" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg" title="Making a summer # 3 :) ((Nikon woman))"> <img src="/uploads/201709/13/15052950678.jpg" alt="" /> </a> </p> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/jquery.fancybox.pack.js"></script> <script type="text/javascript"> $(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' } } }); }); </script> Demo effect(thumbnail): Sample code: <link href="~/Content/jquery.fancybox.css" rel="stylesheet" /> <link href="~/Content/jquery.fancybox-thumbs.css" rel="stylesheet" /> <p> <h2>Thumbnail helper</h2> <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg" title="Bråviken (jarnasen)"> <img src="/uploads/201709/13/15052950677.jpg" alt="" /> </a> <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg" title="From the garden (*Jilltoo)"> <img src="/uploads/201709/13/15052950678.jpg" alt="" /> </a> <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8591/16141566979_347348e72c_b.jpg" title="cold forest (picturesbywalther)"> <img src="/uploads/201709/13/150529506912.jpg" alt="" /> </a> <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_b.jpg" title="Holly blue (Masa_N)"> <img src="/uploads/201709/13/150529507013.jpg" alt="" /> </a> </p> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/jquery.fancybox.pack.js"></script> <script src="~/Scripts/jquery.fancybox-thumbs.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".fancybox-thumb").fancybox({ prevEffect: 'elastic',nextEffect: 'elastic',helpers: { title: { type: 'inside' },thumbs: { width: 50,height: 50 } } }); }); </script> 以上就是3款jQuery插件fancybox图片放大展示效果网页特效,应用简单,兼容IE6老版本级别浏览器。图片放大只适应大小并自动窗口居中显示。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |