0712-2888027 189-8648-0214
微信公眾號(hào)

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > Fancybox一款基于jquery開(kāi)發(fā)的類Lightbox插件

Fancybox一款基于jquery開(kāi)發(fā)的類Lightbox插件

時(shí)間:2018-10-26來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 978次
Fancybox是一款基于jquery開(kāi)發(fā)的類Lightbox插件。支持對(duì)放大的圖片添加陰影效果,對(duì)于一組相關(guān)的圖片添加導(dǎo)航操作按紐。
Fancybox 是一款很絢麗的 jquery 彈出層展示插件,該lightbox除了能夠展示圖片之外,還可以展示iframed內(nèi)容, 通過(guò)css自定義外觀。
Fancybox一款基于jquery開(kāi)發(fā)的類Lightbox插件
 
下載地址:https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/fancybox/jquery.fancybox-1.3.4.zip
 
使用方法
 
引入核心文件:
<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>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 
<!--也可以通過(guò)easing插件實(shí)現(xiàn)fancy transitions 動(dòng)畫效果-->
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
 
<!--如果要實(shí)現(xiàn)圖片滾輪效果,引入下面文件:-->
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
 
 
圖片應(yīng)用:
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
 
鏈接應(yīng)用:
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
 
Iframe應(yīng)用:
<a href="http://www.example?iframe">This goes to iframe</a>
 
or
 
<a class="iframe" href="http://www.example">This goes to iframe</a>
 
Ajax應(yīng)用:
<a href="http://www.example/data.php">This takes content using ajax</a>
 
JQuery控制代碼:
 
$(document).ready(function() {
 
/* This is basic - uses default settings */
 
$("a#single_image").fancybox();
 
/* Using custom settings */
 
$("a#inline").fancybox({
'hideOnContentClick': true
});
 
/* Apply fancybox to multiple items */
 
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600, 
'speedOut' : 200, 
'overlayShow' : false
});
 
});
 
用rel標(biāo)簽來(lái)創(chuàng)建相冊(cè)
 
/* HTML結(jié)構(gòu) */
<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> 
 
 
/* JQuery結(jié)構(gòu)*/
$("a.grouped_elements").fancybox();
 
fancybox中的一些常用參數(shù)

padding 跟css里的padding差不多意思
imageScale 如果為true,則圖片會(huì)被縮放以適應(yīng)窗口
zoomOpacity 如果為true,則在動(dòng)畫過(guò)程中內(nèi)容的透明度會(huì)改變
overlayShow 如果為true,則顯示遮罩,默認(rèn)為false
overlayOpacity 遮罩的透明度,值為0--1
centerOnScroll 值為true的話,當(dāng)用戶滾動(dòng)頁(yè)面時(shí),內(nèi)容會(huì)一直居中顯示
frameWidth/height iframe和inline框口的默認(rèn)寬度/高度
zoomSpeedIn zooming-in動(dòng)畫時(shí)的速度,單位為毫秒。0的話動(dòng)畫將不會(huì)出現(xiàn)
zoomSpeedOut zooming-out動(dòng)畫時(shí)的速度,單位為毫秒。0的話動(dòng)畫將不會(huì)出現(xiàn)
zoomSpeedChange 切換圖片時(shí)的動(dòng)畫速度,單位為毫秒。值為0的話將不會(huì)出現(xiàn)動(dòng)畫

         方法
         $.fancybox.showActivity 顯示加載動(dòng)畫  
         $.fancybox.hideActivity 隱藏加載動(dòng)畫  
         $.fancybox.close 關(guān)閉窗口  
         $.fancybox.resize 自動(dòng)調(diào)整窗口的高度使之與內(nèi)容相適應(yīng)


熱門關(guān)鍵詞: Fancybox jquery 開(kāi)發(fā) Lightbox插件

您可能感興趣的相關(guān)文章:

欄目列表
推薦內(nèi)容
熱點(diǎn)內(nèi)容
展開(kāi)