相册浏览 放大 全屏

相册浏览 放大 全屏

 

演示

 

 

XML/HTML Code

<div class="demo-wrapper">

<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>
<li class="item"><a href="#"><img src="images/small-4.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-5.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-6.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-7.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-8.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-9.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-10.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-11.png" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small-12.png" alt="" /></a></li>
</ul>
<ul class="items--big">
<li class="item--big"><a href="#"><img src="images/big-1.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-2.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-3.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-4.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-5.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-6.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-7.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-8.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-9.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-10.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-11.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big-12.jpg" alt="" /></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>
</div>

 

JavaScript Code

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

 

原文地址:http://www.freejs.net/article_jquerytupiantexiao_231.html