该插件乃本博客作者所写，目的在于提升作者的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);

点击下载Demo

jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）的更多相关文章

  1. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  2. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  3. 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  4. 瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

    纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!   前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简 ...

  5. 基于jQuery开发的手风琴插件 jquery.accordion.js

     1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...

  6. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

  7. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  8. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  9. jQuery表单验证插件——jquery.validate.js

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...

随机推荐

  1. 信号通讯编程,王明学learn

    信号通讯编程 在Linux系统中,信号(signal)同样也是最为古老的进程间通信机制. 一.信号类型 Linux系统支持的所有信号均定义在/usr/include/asm/signal.h(展示), ...

  2. 第二十五篇：在SOUI中做事件分发处理

    不同的SOUI控件可以产生不同的事件.SOUI系统中提供了两种事件处理方式:事件订阅 + 事件处理映射表(参见第八篇:SOUI中控件事件的响应) 事件订阅由于直接将事件及事件处理函数连接,不存在事件分 ...

  3. Hadoop RPC机制的使用

    一.RPC基础概念 1.1 RPC的基础概念 RPC,即Remote Procdure Call,中文名:远程过程调用: (1)它允许一台计算机程序远程调用另外一台计算机的子程序,而不用去关心底层的网 ...

  4. 【微信Java开发 --1】内网穿透外网，使用外网域名可以访问到本地项目

    1.首先上https://natapp.cn/ 2.接下来在网站申请账号 3.购买免费隧道 4.为你的免费隧道设置名称以及端口号,由于本人本地的使用Tomcat做服务器,所以用惯了8080端口,因此设 ...

  5. Js图片切换

    <!DOCTYPE html><html<head> <meta charset="UTF-8"> <title></t ...

  6. JavaScript给onclick事件赋值，动态传参数实例辩错

    错误的例子: <body> <input id="certid" type="text" value="123456" & ...

  7. unicode-range 字体混搭(转）

    最先想到的方法是定义两个拥有不同字体CSS类分别赋予不同的元素. <div class="font1"></div> <div class=" ...

  8. nefu1118 最长上升子序列(LIS)

    discription:定义臻.排序数列如下:一个数列删去其中一个数后是从小到大排好序的,称这个数列为臻.排序数列.现在给你一个数列,判断它是否为臻.排序数列. intput:多组输入数据,每组有两行 ...

  9. idea 使用

    1.idea对maven的兼容性优于eclipse,idea对于程序内部管理是模块,个人感觉也是优于eclipse. 2.idea默认设置编辑器字体是比较差的. 可以参考文章 http://www.3 ...

  10. 内核终端判断，微信？QQ？ipad？IE？移动？Google？opera……

    $(document).ready(function(){ //判断访问终端 var browser={ versions:function(){ var u = navigator.userAgen ...