大多數(shù)網(wǎng)頁喜歡采用 lightbox 形式來展示相冊圖像,特別是電子商務(wù)購物網(wǎng)站最為常見,燈箱插件很多,若你還沒找到一款稱心的圖像展示插件,可以看看今天設(shè)計達人網(wǎng)為大家分享的 lightGallery jQuery相冊插件。
Light Gallery 插件使用響應(yīng)式設(shè)計,良好兼容手機端,并支持觸膜滑動方式來觀看圖像,簡單直觀的操作。
該相冊插件功能豐富,下面列出一些特色:
全響應(yīng)式兼容
全屏展示
模塊化架構(gòu)
觸屏滑動圖像
縮略圖動畫
支持視頻展示
支持iFrame框架
圖像可放大縮小
一個頁面上可放多個DEMO
可能過CSS(SCSS)定制樣式
鍵盤切換圖像
支持字體圖標(biāo)
瀏覽器兼容
IE8+ 以及主流瀏覽器
使用教程
STEP 1 : 加載外部樣式
<head>
<link type=”text/css” rel=”stylesheet” href=”css/lightGallery.css” />
</head>
STEP 2 : 引入jQuery插件和lightGallery相冊插件
<body>
….
<!– jQuery 版本 >= 1.8.0; –>
<script src=”jquery.min.js”></script>
<script src=”js/lightgallery.min.js”></script>
<!– 支持鼠標(biāo)滑輪東鍵盤操作插件(可選)–>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js”></script>
<!– lightgallery 插件 –>
<script src=”js/lg-thumbnail.min.js”></script>
<script src=”js/lg-fullscreen.min.js”></script>
</body>
STEP 4 : HTML 代碼
<div id=”lightgallery”>
<a href=”img/img1.jpg”>
<img src=”img/thumb1.jpg” />
</a>
<a href=”img/img2.jpg”>
<img src=”img/thumb2.jpg” />
</a>
…
</div>
STEP 4 : JS 代碼,用于激活插件
<script type=”text/javascript”>
$(document).ready(function() {
$(“#lightgallery”).lightGallery();
});
</script>
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司!
網(wǎng)頁標(biāo)題:支持觸屏滑動的響應(yīng)式相冊jQuery插件
文章出自:http://redsoil1982.com.cn/news12/320862.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、虛擬主機、網(wǎng)站制作、網(wǎng)站收錄
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)