该插件乃本博客作者所写，目的在于提升作者的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. hdu 3032 sg打表找规律 *

    有n堆石子,alice先取,每次可以选择拿走一堆石子中的1~x(该堆石子总数) ,也可以选择将这堆石子分成任意的两堆.alice与bob轮流取,取走最后一个石子的人胜利. 打表代码: #include ...

  2. 跟着鸟哥学Linux系列笔记0-如何解决问题

    跟着鸟哥学Linux系列笔记0-扫盲之概念 在发生问题怎么处理: 1.  在自己的主机.网络数据库上查询How-To或FAQ -Linux 自身的文件数据: /usr/share/doc -CLDP中 ...

  3. HR外包系统 - 账款

    01 账款-服务费,注意多币种以及收款对象和联系人的设置 02 代收代付,注意多币种以及收款对象和联系人的设置 03 账单要保存服务费计算的整个过程,便于后面出报表和数据分析 04 出报表时,要考虑 ...

  4. apk 打包方式

    1 项目-->Android tools -->Export Signed  Application Package 2 在项目 manifest.xml文件下 单击“use the Ex ...

  5. （转载）如何借助KeePassX在Linux上管理多个密码

    转自:http://netsecurity.51cto.com/art/201311/417764.htm 如今,基于密码的身份验证在网上非常普遍,结果你恐怕数不清自己到底在使用多少个密码.实际上,据 ...

  6. while do while以及穷举和迭代

    今天的新内容1:while循环 格式: while() { } 初始状态要在循环外提前规定 状态改变要写在花括号里面 括号内是循环条件 for循环与while循环的对比: 2:do while 不管循 ...

  7. MSComm32控件注册方法

    两种方法去解决,一种方法是当我们安装VC++6.0/VB6.0时,如果选择了ACtiveX控件项(自定义安装),MSComm控件就会自动安装在计算机上了,并在系统文件夹下多了3个文件:Mscomm.s ...

  8. 归并排序（Merge Sort）

    归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列:即先使每个子序列有序,再使子序 ...

  9. HDU4609 3-idiots（母函数 + FFT）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=4609 Description King OMeGa catched three men wh ...

  10. POJ2976 Dropping tests（01分数规划）

    题目大概说给n个二元组Ai和Bi,要去掉k个,求余下的100*∑Ai/∑Bi的最大值. 假设要的最大的值是ans,令Di=Ai-ans*∑Bi,对Di排序取最大的n-k个,如果∑Ai-ans*∑Bi& ...