HTML & CSS » 适合Bootstrap的灯箱插件：simplegallery

适合Bootstrap的灯箱插件：simplegallery

发表于: HTML & CSS. 评论
Sponsor

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设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 、、 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }