企业一站式服务平台
服务
  • 服务
  • 资讯
  • 店铺
建站
设计
推广
当前位置:主页 > 梦网学堂 > 建站技术 > 正文

适合Bootstrap的灯箱插件:simplegallery

2018-07-10 11:54 | 来源:未知 | 责任编辑:admin

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>

 

联系我们

一站式管家服务、我们坚持24小时接受呼叫,感谢您对我们的信任!

来电咨询

400-661-2208

QQ咨询

920796682

微信咨询

13764908986

旺旺咨询

caomingcsdn

上海明帮信息科技有限公司保留所有权利 业务咨询热线:400-661-2208 手机: 13764908986
业务咨询热线:400-661-2208 手机: 13764908986 上海明帮信息科技有限公司保留所有权利

沪ICP备14048644号

请选择服务
立刻预约
首页 咨询 短信 电话