CSS图书馆 » HTML & CSS » 适合Bootstrap的灯箱插件:simplegallery

适合Bootstrap的灯箱插件:simplegallery

发表于: HTML & CSS. 评论
赞助商链接

Simple Gallery是一款jQuery灯箱插件,同时这款插件采用 Bootstrap 框架的代码结构,让相册实现自适应的效果。

插件名称:simplegallery
插件演示:https://bhaskarmac.github.io/simplegallery/
下载地址:https://github.com/bhaskarmac/simplegallery

使用教程

STEP1: 下载文件后,把「myscript.js」和「imageData.json」放在同一目录,并引用到「myscript.js」到 HTML 头部。

<head>
...
<script src="js/myscript.js" type="text/javascript">
</head>

STEP2: 修改imageData.json文件,用于展示图像路径和顺序,如下图:

STEP3: 在BODY区域添加以下HTML元素:

<div class="overlay">
<div class="content">
<a href="#" class="closebtn">&times;</a>
<a class="navigationControls prev">&#10094;</a>
<a class="navigationControls next">&#10095;</a>
<img src="" class="img-responsive bigImage"/>
<div class="imageTitle"></div>
</div>
</div>

<div class="container">
<ul class="row galleryContainer">
</ul>
</div>

建议下载原代码的DEMO来参考修改,都很简单的哦。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。