支持全屏的图片相册jQuery插件
- 作者：网页模板
- 大小：1.05MB
- 点击次数：
- 发布时间：2014-09-16 09:58
特效介绍
支持全屏的图片相册插件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>
- 本文标签：
- jQuery相册
