站长资源
中国站长网站
        找回密码

图片点击放大插件simple gallery

2018-05-10 13:18:45 来源：图片点击放大插件 分类：JS 阅读(1240) 评论(0) 作者：全栈工程师

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来参考修改，都很简单的哦。

提示：【通用访问密码：986482】
本文出处：来自互联网信息共享，请勿相信收费信息站长资源 » 图片点击放大插件simple gallery
标签：

相关推荐

评论 抢沙发

评论前必须登录！