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="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" /></a> <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"><img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.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="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.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="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_m.jpg" alt="" /> </a> <a id="single_3" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg" title="cannon needles (justinpoe)"> <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.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="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.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="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.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="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.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="http://farm9.staticflickr.com/8591/16141566979_347348e72c_m.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="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_m.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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery+php实现动态数字显示效果
jquery动画效果图片轮播实现（附代码）
以上就是jquery的fancybox插件做出图片展示功能的详细内容。