jQuery響應式圖片畫廊插件S Gallery

拉丁傳說 2018-4-13 1288

S Gallery 是一款使用了 CSS3 動畫效果的 jQuery 響應式片畫廊插件,插件的靈感來自于SONY(索尼)的一個產品展示頁,原本是由 Flash?制作的,而作者則用 HTML、CSS3 和 JavaScript 創建了這樣的效果。

S Gallery 有一個很棒的功能:當退出幻燈片模式返回到網格視圖模式時,當前查看的圖片會以很明顯的動畫方式“返回”到網格視圖中的位置,從而讓你知道你是從哪個位置停下的,可以從哪里繼續瀏覽。

兼容性

由于 S Gallery 使用了 CSS3 動畫效果,所以它不兼容 IE6 – IE9。

使用方法

1、引入文件

<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>

為了優化、豐富 S Gallery,作者加入了一個 plugins.js 文件,該文件包含了 Hammer.js 和 Screenfull.js 兩個 JavaScript 文件。Hammer.js 是一個專門用于多點觸摸及手勢的 JavaScript 庫;Screenfull.js 則是一個跨瀏覽器全屏的 JavaScript。所以 S Gallery 的功能是非常豐富的:支持觸控、支持鍵盤方向鍵控制、支持全屏(HTML5 API)等。

當然,如果你不需要那么功能,去掉 plugins.js 這個文件,S Gallery 也是完全可以正常使用的。

2、HTML

<div id="gallery-container">
?? ?<ul class="items--small">
?? ??? ?<li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>
?? ??? ?<li class="item"><a href="#"><img src="images/small-2.png" alt="" /></a></li>
?? ??? ?<li class="item"><a href="#"><img src="images/small-3.png" alt="" /></a></li>
?? ??? ?...
?? ?</ul>
?? ?<ul class="items--big">
?? ??? ?<li class="item--big"> <a href="#">
?? ??? ??? ?<figure> <img src="images/big-1.jpg" alt="" />
?? ??? ??? ??? ?<figcaption class="img-caption"> Caption </figcaption>
?? ??? ??? ?</figure>
?? ??? ??? ?</a></li>
?? ??? ?<li class="item--big"> <a href="#">
?? ??? ??? ?<figure> <img src="images/big-2.jpg" alt="" />
?? ??? ??? ??? ?<figcaption class="img-caption"> Caption </figcaption>
?? ??? ??? ?</figure>
?? ??? ??? ?</a> </li>
?? ??? ?<li class="item--big"> <a href="#">
?? ??? ??? ?<figure> <img src="images/big-3.jpg" alt="" />
?? ??? ??? ??? ?<figcaption class="img-caption"> Caption </figcaption>
?? ??? ??? ?</figure>
?? ??? ??? ?</a> </li>
?? ??? ?...
?? ?</ul>
?? ?<div class="controls">
?? ??? ?<span class="control icon-arrow-left" data-direction="previous"></span>
?? ??? ?<span class="control icon-arrow-right" data-direction="next"></span>
?? ??? ?<span class="grid icon-grid"></span>
?? ??? ?<span class="fs-toggle icon-fullscreen"></span>
?? ?</div>
</div>

3、JavaScript

$(function(){
?? ?$('#gallery-container').sGallery({
?? ??? ?fullScreenEnabled: true
?? ?});
});

參數

S Gallery 只有一個參數,就是全屏參數 fullScreenEnabled:

參數 說明 默認值
fullScreenEnabled 是否顯示全屏按鈕 false

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将