這次帶給大家JQuery的FancyBox外掛做出圖片展示功能，FancyBox外掛程式做出圖片展示功能的注意事項有哪些，以下是實戰案例，一起來看一下。
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>登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
jquery php實作動態數位顯示效果
#jQuery動畫效果圖片輪播實作（附程式碼）
以上是JQuery的FancyBox插件做出圖片展示功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
