这是一款效果相当炫酷的jQuery和CSS3响应式带全屏模式的图片画廊插件。该图片画廊插件使用CSS3 Animations来制作动画。该响应式图片画廊插件支持移动触摸设备，支持使用键盘来导航，同时支持HTML5全屏模式API，可在全屏模式下预览图片。

HTML代码

这个图片画廊的HTML结构并不复杂，使用两个无序列表，第一个用来放置缩略图，第二个用来放置原图。把它们包装到一个<div>中，为<div>取个id#gallery-container。

注意：缩略图的宽高比要和原图相同。并且缩略图不能比原图还大。

还要为图片画廊添加一个控制条，用于前后导航图片和放大进入全屏模式等操作。使用一个class为controls的<div>来放置这些元素。

<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>
    <!--.....-->
  </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>
    <!--...-->
  </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>

在该图片画廊插件中的控制按钮使用的是sprite图片。

插件依赖

这个图片画廊插件有两个外部依赖：图片画廊的CSS样式和jQuery。

在页面的<header>中引入图片画廊的样式文件。

<link rel="stylesheet" href="path-to-stylesheets/styles.css" />

在页面的<header>或<body>标签之前引入jQuery文件。

<script src="path-to-your-js-scripts/jquery.js"></script>

为了是该图片画廊插件支持移动触摸设备，需要使用hammer.js。另外，为了使用Html5全屏模式，还加入了另一个插件Screenfull.js，这是一个经过简单包装的跨浏览器全屏模式js插件。这两个插件都放在scripts.js文件中，你需要引入这个文件。

<script src="path-to-your-js-scripts/plugins.js"></script>

你可以选择是否在该图片画廊插件中使用全屏模式，你可以在插件初始化的时候通过参数fullScreenEnabled来开启或关闭它。

完整脚本引用如下：

<script src="path-to-your-js-scripts/jquery.js"></script>
<script src="path-to-your-js-scripts/plugins.js"></script>
<script src="path-to-your-js-scripts/scripts.js"></script>

插件调用

图片画廊插件调用十分简单，初始化时全屏模式默认为false，你可以设置它为true来打开全屏模式：

$(document).ready(function(){
    $('#gallery-container').sGallery({
      fullScreenEnabled: true //default is false
    });
});