Fancybox是一款基于jquery開發(fā)的類Lightbox插件。支持對放大的圖片添加陰影效果，對于一組相關(guān)的圖片添加導(dǎo)航操作按紐。Fancybox 是一款很絢麗的 jquery 彈出層展示插件，該lightbox除了能夠展示圖片之外，還可以展示iframed內(nèi)容， 通過css自定義外觀。
官方網(wǎng)站：http://www.fancybox.net/home
下載地址：https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/fancybox/jquery.fancybox-1.3.4.zip
使用示例：
1、引入Jquery文件
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
2、引入Fancybox樣式文件
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
3、在需要使用Fancybox的圖片中加上屬性
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>
<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a>
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a>
4、JS文件控制：
<script type="text/javascript">
jQuery(document).ready(function ($) {
$("a[rel=group1]").fancybox({
'titleShow': true,
'transitionIn': 'none',
'showNavArrows': true,
'transitionOut': 'none'
});
})
</script>
鄂公網(wǎng)安備 42090202000212號