JS插件开发之LightBox图片画廊

工程目录结构图：

lightBox.js封装了写好的插件，直接导入即可，这里就不在详细解释代码了，主要介绍一下怎么运用该插件，下载地址：http://download.csdn.net/detail/u012612399/9373624
如果要兼容IE6的话，需要导入DD_belatedPNG.js。
html代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><link rel="stylesheet" href="css/public.css" /><link rel="stylesheet" href="css/style.css" /><script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script><script type="text/javascript" src="js/lightBox.js" ></script><title></title><script>$(function(){var lightbox = new LightBox({speed:200,maxWidth:900,maxHeight:600});});</script></head><body style="height: 1200px;">class="js-lightbox" width="100" height="100"表示这个元素要启用lightbox<br>data-role="lightbox" 表示这个元素要启用lightbox<br>data-source="img/2-1.jpg"原图的地址<br>data-group="group-2"标识当前是否属于一个组别<br>data-id="gvfdg"图片的唯一标识<br>data-caption="rew"当前图片的描述文字<br><h1>1组图片</h1>   <div><img class="js-lightbox" width="100" height="100"data-role="lightbox" data-source="img/1-1.jpg"src="img/1-1.jpg"data-group="group-1"data-id="hfuisdhf"data-caption="hfiugyuhfa"/><img class="js-lightbox" width="100" height="100" data-role="lightbox" data-source="img/1-2.jpg" src="img/1-2.jpg" data-group="group-1" data-id="vbdhfg" data-caption="hfiugyuhfa"/><img class="js-lightbox" width="100" height="100" data-role="lightbox" data-source="img/1-3.jpg" src="img/1-3.jpg" data-group="group-1" data-id="jrtfgh" data-caption="hfiugyuhfa"/></div><h1>2组图片</h1>   <div><img class="js-lightbox" width="100" height="100"data-role="lightbox" data-source="img/2-1.jpg"src="img/2-1.jpg"data-group="group-2"data-id="vsasde"data-caption="htfger"/></div><!--遮层--><!--<div id="G-lightbox-mask"></div>--><!--弹出层--><!--<div id="G-lightbox-popup"><div class="lightbox-pic-view"><span class="lightbox-btn lightbox-prev-btn lightbox-prev-btn-show"></span><img class="lightbox-imgage" src="img/2-2.jpg" width="100%"/><span class="lightbox-btn lightbox-next-btn lightbox-next-btn-show"></span></div><div class="lightbox-pic-caption"><div class="lightbox-caption-area"><p class="lightbox-pic-desc">图片标题</p><span class="lightbox-of-index">当前索引：1 of 4</span></div><span class="lightbox-close-btn"></span></div></div>--></body>
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix("#G-lightbox-mask,#G-lightbox-popup .lightbox-pic-view .lightbox-btn,#G-lightbox-popup .lightbox-pic-caption");
</script>
<![endif]--> </html>

JS插件开发之LightBox图片画廊相关推荐

vscode插件开发之Swagger生成Ts
vscode插件开发之Swagger生成Ts 当后端同学给到我们Swagger接口文档的时候,是不是在为要写接口类型烦恼,为了偷懒,那么就any吧.any一时爽,同事泪两行.为了高质量的偷懒,来开发个 ...
android 监听安装来源_Flutter插件开发之APK自动安装
点击上方的终端研发部,右上角选择"设为星标" 每日早9点半,技术文章准时送上公众号后台回复"学习",获取作者独家秘制精品资料往期文章记五月的一个Andro ...
html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效
这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...
Jmeter Kafka插件开发之Sampler篇
Jmeter Kafka插件开发之Sampler篇背景:在项目中经常需要往kafka里面写数据,并拿生成的数据执行后续的操作,并且有些接口中也需要用到kafka里的数据,小编使用JMeter做接口测 ...
Idea插件开发之Gradle
Idea插件开发之Gradle 1. 前言作为Java开发者,Intellij Idea可以说是必备开发工具,Jetbrains提供了丰富的插件库.但是,有时候我们都在做重复.繁琐.无意义的操作,我 ...
CDR插件开发之CPG插件001 - 什么是CPG插件
CPG,英文缩写 Corel Plugin,中文含义是 Corel 插件,简称CPG插件,典型代表有魔镜.CDR是鼎鼎大名的创意图形设计软件,几乎是广告.印刷行业的标准,而正是由于CDR在日常的排版. ...
JQuery开发之Galleriffic图片插件介绍
Galleriffic是一个用于创建快速展示相册中照片的jQuery插件.从图一中可以看成,图片既可以以幻灯片的方式查看,也可以手动点击缩略图查看.Galleriffic还支持分页,从而使得它能够展示 ...
js插件+UploadFile类实现图片的批量上传
文件上传无疑是web应用中一个非常常用的功能,下面小编给大家分享一下diyUpload.js+ThinkPHP中的UploadFile类实现图片的批量上传. 首先,给大家介绍展示一下具体操作页面: h ...
插件开发之VSCode
欢迎各位大家关注本人微信公众号:程序员JC,小程序:RobotJC 里面包含很多本人之前做的小案例,也许这里有你想要的东西哦. 鉴于我前两周研究了并开发了一个VSCode插件的情况,这次就讲一下插件开 ...
CDR插件开发之Application（应用程序）
在CorelDRAW提供的对象模型中,Application是被开发者经常使用的一个对象,也是最顶级的对象.本文对CorelDRAW(以下简称CDR)对象模型中的 Application 类做了一个简 ...

JS插件开发之LightBox图片画廊

JS插件开发之LightBox图片画廊相关推荐

最新文章

热门文章