该插件乃本博客作者所写，目的在于提升作者的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. MongoDB学习（1）—在Windows系统中安装MongoDB

    概述 本文主要介绍在Windows系统安装MongoDB的方法. MongoDB官方网址:http://www.mongodb.org/,最新版本为2.6.7. 注意: 从2.2版本开始,MongoD ...

  2. Android系统架构

    Linux内核层 为Android的各种设备提供了底层驱动 系统运行库层 为Android提供一些底层的库,如数据库.3D绘图等 应用框架层 核心API 应用层 具体的手机application An ...

  3. 三层+MVC导出Excel(2)

    背景: 出门在外,一切以健康为主,学习为辅,健康搞好了,学习也不能拉下,在外工作期间,我们在做数据导出的时候,自己封了一个类,利用NPOI进行数据导出Excel,自我感觉良好,特给大家分享一下,希望对 ...

  4. Liferay 6.2 改造系列之十六：关闭OpenID模式的单点登录

    在/portal-master/portal-impl/src/portal.properties文件中,有如下配置: # # Set this to true to enable OpenId au ...

  5. js正则表达式练习

    匹配完整的名字 function process_name() { var field = document.getElementById("name_field"); var n ...

  6. node.js整理 03文件操作-遍历目录和文本编码

    遍历目录 递归算法 遍历目录时一般使用递归算法,否则就难以编写出简洁的代码. 递归算法与数学归纳法类似,通过不断缩小问题的规模来解决问题 function factorial(n) { if (n = ...

  7. Swift3.0语言教程获取字符串长度

    Swift3.0语言教程获取字符串长度 Swift3.0语言教程获取字符串长度,当在一个字符串中存在很多的字符时,如果想要计算字符串的长度时相当麻烦的一件事情,在NSString中可以使用length ...

  8. JS(ajax笔记)

    简介:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是与服务器交 ...

  9. vector初始化

    对vector对象来说,直接初始化的方式适用于3种情况:1.初始值已知且数量少:2.初始值是另一个vector对象的副本:3.所有元素的初始值都一样.此外还有一种更常见的情况是4.创建一个vector ...

  10. 使用Maven构建Android项目

    http://www.ikoding.com/build-android-project-with-maven/ 之前一直在做WEB前端项目,前段时间接手第一个Android项目,拿到代码之后,先试着 ...