首页>>Jquery图片>>相册浏览 放大 全屏(2014-01-09)

相册浏览 放大 全屏

相册浏览 放大 全屏
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="demo-wrapper">    
  2.   
  3. <div id="gallery-container">  
  4. <ul class="items--small">  
  5. <li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>  
  6. <li class="item"><a href="#"><img src="images/small-2.png" alt="" /></a></li>  
  7. <li class="item"><a href="#"><img src="images/small-3.png" alt="" /></a></li>  
  8. <li class="item"><a href="#"><img src="images/small-4.png" alt="" /></a></li>  
  9. <li class="item"><a href="#"><img src="images/small-5.png" alt="" /></a></li>  
  10. <li class="item"><a href="#"><img src="images/small-6.png" alt="" /></a></li>  
  11. <li class="item"><a href="#"><img src="images/small-7.png" alt="" /></a></li>  
  12. <li class="item"><a href="#"><img src="images/small-8.png" alt="" /></a></li>  
  13. <li class="item"><a href="#"><img src="images/small-9.png" alt="" /></a></li>  
  14. <li class="item"><a href="#"><img src="images/small-10.png" alt="" /></a></li>  
  15. <li class="item"><a href="#"><img src="images/small-11.png" alt="" /></a></li>  
  16. <li class="item"><a href="#"><img src="images/small-12.png" alt="" /></a></li>  
  17. </ul>  
  18. <ul class="items--big">  
  19. <li class="item--big"><a href="#"><img src="images/big-1.jpg" alt="" /></a></li>  
  20. <li class="item--big"><a href="#"><img src="images/big-2.jpg" alt="" /></a></li>  
  21. <li class="item--big"><a href="#"><img src="images/big-3.jpg" alt="" /></a></li>  
  22. <li class="item--big"><a href="#"><img src="images/big-4.jpg" alt="" /></a></li>  
  23. <li class="item--big"><a href="#"><img src="images/big-5.jpg" alt="" /></a></li>  
  24. <li class="item--big"><a href="#"><img src="images/big-6.jpg" alt="" /></a></li>  
  25. <li class="item--big"><a href="#"><img src="images/big-7.jpg" alt="" /></a></li>  
  26. <li class="item--big"><a href="#"><img src="images/big-8.jpg" alt="" /></a></li>  
  27. <li class="item--big"><a href="#"><img src="images/big-9.jpg" alt="" /></a></li>  
  28. <li class="item--big"><a href="#"><img src="images/big-10.jpg" alt="" /></a></li>  
  29. <li class="item--big"><a href="#"><img src="images/big-11.jpg" alt="" /></a></li>  
  30. <li class="item--big"><a href="#"><img src="images/big-12.jpg" alt="" /></a></li>  
  31. </ul>  
  32. <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>  
  33. </div>  
  34. </div>  

 

JavaScript Code
  1. <script>   
  2.     $(document).ready(function(){   
  3.       $('#gallery-container').sGallery({   
  4.         fullScreenEnabled: true  
  5.       });   
  6.     });   
  7.   </script>  

 


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