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);

点击下载Demo

posted @ 2015-09-29 14:20  豫见世家公子  阅读(1419)  评论(0)  编辑  收藏  举报