该插件乃本博客作者所写，目的在于提升作者的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. OpenMesh 删除网格顶点

    OpenMesh 提供了 delete_vertex() 函数来实现从网格中删除顶点,在删除掉顶点的同时,所有与该顶点相连的边也同时被删除. OpenMesh 官方文档 中给的顶点删除函数声明如下: ...

  2. cf #365b 巧妙的统计

     Mishka and trip time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  3. 转：Delphi和Office程序开发 --不错可查阅

    http://www.delphifans.com/infoview/Article_730.html日期:2006年2月20日 作者:潇潇2003 人气:5602 查看:[大字体 中字体 小字体] ...

  4. Sleep函数的真正用意

    转自:http://blog.csdn.net/boyuejiang/article/details/8908333 关于VOID Sleep(DWORD dwMilliseconds);函数,许多人 ...

  5. 并查集(删除) UVA 11987 Almost Union-Find

    题目传送门 题意:训练指南P246 分析:主要是第二种操作难办,并查集如何支持删除操作?很巧妙的方法:将并查集树上p的影响消除,即在祖先上(sz--, sum -= p),然后为p换上马甲:id[p] ...

  6. BestCoder Round #68 (div.2)

    并查集 1002 tree 题意:中文题面 分析:(官方题解)把每条边权是1的边断开,发现每个点离他最近的点个数就是他所在的连通块大小. 开一个并查集,每次读到边权是0的边就合并.最后Ansi=siz ...

  7. C# 词法分析器（三）正则表达式

    系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 正则表达式是一种描述词素的重要表示方法.虽然正则表达 ...

  8. C#调用本机摄像头

    这段时间一个小项目中需要调用本机的摄像头进行拍照,网上搜集了一些资料以及解决的一些小问题,在此记录以便后续使用. 硬件环境:联想C360一体机,自带摄像头 编写环境:vs2010 语言:C# WPF ...

  9. jqgrid在colModel中多次调用同一个字段值

    Debug: 代码1: { name : 'input', index : 'input', width : 100, align : "center", formatter : ...

  10. CSS抗锯齿 font-smoothing 属性介绍

    CSS3里面加入了一个“-webkit-font-smoothing”属性. 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服. 加上之后就顿时感觉页面小清晰了. 淘宝也在用哦! 它有三 ...