jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）
该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。
此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果，您可以根据自己的实际需求来设置是否添加左右切换图片的效果。整体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.item{margin:20px;}
.item ul li{float:left;margin-right:20px;}
.item ul li img{width:100px;cursor:pointer;}
.lb_wrap{display:none;}
.lightbox_bg{background:#000;filter:alpha(opacity=70);opacity:.7;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}
.lightbox{position:absolute;left:0;top:50%;width:100%;z-index:2;text-align:center;}
.lightbox p{position:absolute;height:61px;width:38px;top:50%;left:0;z-index:2;background:transparent url(themes.png) no-repeat left top;margin-top:-30.5px;cursor:pointer;}
.lightbox p.next{left:auto;background-position:right top;right:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.LightBox.js"></script>
</head> <body>
<div class="item">
<ul>
<li><img src="01.jpg" /></li>
<li><img src="02.jpg" /></li>
<li><img src="03.jpg" /></li>
<li><img src="04.jpg" /></li>
<li><img src="05.jpg" /></li>
<li><img src="06.jpg" /></li>
</ul>
</div>
<script>
$(function(){
$(".item").LightBox({
controls : true //上一张、下一张按钮是否显示，默认是显示true
});
})
</script>
</body>
</html>
插件jquery.LightBox.js代码：
/*
*LightBox 1.0
*Copyright (c) 2015 小坏 http://tnnyang.cnblogs.com
*dependence jquery-1.7.1.js
*/
;(function(a){
a.fn.LightBox = function(options){
var defaults = {
controls : true //上一张、下一张按钮是否显示，默认是显示true
}
var opts = a.extend(defaults, options); var lb_wrap = '<div class="lb_wrap"><div class="lightbox_bg"></div><div class="lightbox"><img src="loading.gif" class="lg_img"></div></div>';
a("body").append(lb_wrap); //controls
if(opts.controls){
a(".lightbox").append('<p class="prev"></p><p class="next"></p>');
} function imgobj(obj1, obj2){
//imgObj.height是通过img对象获取的图片的实际高度
var imgObj = new Image();
imgObj.src = obj1.attr("src");
var margintop = 0 - (imgObj.height)/2;
obj2.css("margin-top",margintop);
} this.each(function(){
var obj = a(this);
var numpic = obj.find("li").length;
var num = 0; //点击赋值并显示
obj.find("img").click(function(){
var src = a(this).attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox")); a(".lb_wrap").fadeIn();
a(".lg_img").fadeIn();
a(".prev").fadeIn().siblings(".next").fadeIn();
num = a(this).parent().index(); //获取当前图片的父元素的索引并赋给num为后边点击上一张、下一张服务
}); //上一张
a(".prev").click(function(){
if(num == 0){
num = numpic;
}
var src = obj.find("li").eq(num-1).find("img").attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox")); num--;
}); //下一张
a(".next").click(function(){
if(num == numpic-1){
num = -1;
}
var src = obj.find("li").eq(num+1).find("img").attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox")); num++;
}); //点击除了上一张、下一张之外的其他地方隐藏
a(".lb_wrap").click(function(e){
var e = e || window.event;
var elem = e.target || e.srcElement;
while(elem){
if (elem.className && elem.className.indexOf('prev')>-1) {
return;
}
if(elem.className && elem.className.indexOf('next')>-1){
return;
}
elem = elem.parentNode;
}
a(this).find("img").attr("src","loading.gif").hide(); //隐藏后，再将默认的图片赋给lightbox中图片的src
a(this).find(".prev").hide().siblings(".next").hide();
a(this).fadeOut();
});
})
}
})(jQuery);
jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）的更多相关文章
- js限制图片大小、点击放大图片、点击在新开页面显示
缩放图片到合适大小 function ResizeImages() { var myimg, oldwidth, oldheight; var ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- 瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！
纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox! 前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...
- 基于jQuery开发的手风琴插件 jquery.accordion.js
1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码: /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...
- jQuery之jquery.lazyload.js插件用法
研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...
- 动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
- 【jQuery小实例】js 插件 查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
- jQuery表单验证插件——jquery.validate.js
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...
随机推荐
- HTTP访问的两种方式（HttpClient+HttpURLConnection）整合汇总对比（转）
在Android上http 操作类有两种,分别是HttpClient和HttpURLConnection,其中两个类的详细介绍可以问度娘. HttpClient: HttpClient是Apache ...
- ubuntu初始化root帐号密码
Ubuntu Kylin 14.04的安装过程中并没有提供设置root密码的过程,取而代之的是自定义的帐号. 如果我们需要使用到root帐号或者root权限,则需要重新设置root帐号的密码. 设置方 ...
- Alcatraz安装 不能用解决方案
1.安装 1>Github上下载Alcatraz,下载地址:https://github.com/supermarin/Alcatraz 2>Alcatraz是xcode的插件,这个插件 ...
- CF731C Socks并查集(森林),连边，贪心，森林遍历方式，动态开点释放内存
http://codeforces.com/problemset/problem/731/C 这个题的题意是..小明的妈妈给小明留下了n只袜子,给你一个大小为n的颜色序列c 代表第i只袜子的颜色,小明 ...
- supervisor(一)基础篇
这两天干的活,是让楼主写一个supervisor的listener,用来监控supervisor所管理子进程的状态,当子进程异常退出时,楼主写的这个listener将会触发报警.在这里总结下super ...
- ce游戏内存修改器(Cheat Engine)
ce修改器(Cheat Engine)一款专门修改内存修改编辑的游戏工具它包括16进制编辑,反汇编程序,内存查找工具新版6.1 版的CE与6.0 最大的区别就是添加了修改器制作工具,比之前 5.6.1 ...
- SpringJDBC解析4-query方法
重要步骤说明: 首先是从PersonServiceImpl方法进去,调用JdbcTemplate的query方法,然后执行一连串错中复杂的调用,而且里面有很多函数都是以回调形式处理, 1)JdbcTe ...
- 如何清除windows 用户名及密码
- java，我准备好了
1.你对自己的未来有什么规划?做了哪些准备? 长期上学好公务员和本专业知识,将来能找一份好工作,并能在职务上履行好相称的工作.短期上在下一学期拿一等奖学金,尽快入党,考出英语四级和二级c语言.任何成就 ...
- 后缀数组 POJ 3693 Maximum repetition substring
题目链接 题意:给定一个字符串,求重复次数最多的连续重复子串. 分析:(论文上的分析)先穷举长度 L,然后求长度为 L 的子串最多能连续出现几次.首先连续出现 1 次是肯定可以的,所以这里只考虑至少 ...