支持全屏的图片相册jQuery插件

    支持全屏的图片相册插件jQuery+css3代码。刚开始，是所有图片列表，点击任意一张，所有图片会消失，然后被点击的会放大显示，大图下面是左右按钮、回到图片列表按钮盒全屏按钮，点击全屏后，将全屏展示图片，并且支持按ESC退出。本相册插件可以放任意多的图片。兼容360极速、FireFox、Chrome、Safari、Opera、傲游极速、搜狗极速、世界之窗极速等，不支持IE8及以下浏览器。 1、引入下面的js和css代码：

<link rel="stylesheet" href="css/5imoban.net.css" />
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>

2、先在相册外面套一层如下的div

<div id="gallery-container">
</div>

3、在里面先放下面的列表作为缩略图

<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>

有多少个图片，就加多少个li，注意缩略图地址。

4、再在上面的缩略图ul下面放如下的大图列表：

<ul class="items--big">
    <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-1.jpg" alt="" />
            <figcaption class="img-caption">
              图片标题
            </figcaption>
          </figure>
          </a>
    </li>
    <li class="item--big">
        <a href="#">
          <figure>
            <img src="images/big-2.jpg" alt="" />
            <figcaption class="img-caption">
              图片标题
            </figcaption>
          </figure>
          </a>
    </li>
</ul>

注意，大图要和上面的缩略图一一对应。图片标题自定义。

5、在大图列表的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>

6、再在后面的随意位置放入调用的js代码：

<script>
    $(document).ready(function(){
     $('#gallery-container').sGallery({
        fullScreenEnabled: true
      });
    });
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！