公司的项目http://www.umfun.com/，有个说说的页面（和腾讯QQ空间说说一样），里面有个发表图片功能，上传完图片，需要点击展开的效果。

当时手里面事情比较多（公司就我一个前端），忙不过来，就用插件来实现了，试了fancyBox、lightbox等jQuery插件。插件都满足不了项目各种奇怪的需求，但是时间有限，只能先凑合了。、

项目上线后，最近时间比较充足，我就想把写个插件封装一下。毕竟人家的插件比较臃肿，修改起来麻烦，同时免得以后又是各种修改，还是根据公司的项目需求写比较好。。。

效果预览，如果下图所示：

点击图片后，展示：

2014-4-18更新

更新内容：1、兼容性问题；

　　　　　 2、点击大图切换到下一张图

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画廊</title>
    <style>
    /*
    * jquery gallery CSS
    * ZhaoHuanLei - 20140418
    */
    .gallery-overlay {width:100%;height:100%;position:fixed;_top:absolute;top:0;left:0;z-index:99;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#B2000000', endColorstr='#B2000000');background-color:rgba(0,0,0,.7);}
    :root .gallery-overlay {filter:none;}
    .gallery-close,
    .gallery-prev,
    .gallery-next {position:absolute;color:#fff;text-decoration:none;}
    .gallery-prev,
    .gallery-next {top:40%;font:bold 80px/80px simsun;}
    .gallery-prev {left:50px;}
    .gallery-next {right:50px;}
    .gallery-close {width:82px;height:77px;top:0;right:0;background:url(http://images.cnitblog.com/i/333689/201404/181538254946336.png) no-repeat;text-indent:-9999em;}
    .gallery-photo {width:100%;height:100%;position:absolute;top:50px;vertical-align:middle;text-align:center;}
    .gallery-photo span {height:100%;display:inline-block;vertical-align:middle;}
    .gallery-photo img {max-width:100%;max-height:100%;vertical-align:middle;cursor:pointer;}
    .gallery-thumb {width:100%;height:56px;position:absolute;bottom:50px;text-align:center;font-size:0;}
    .gallery-thumb a {width:50px;height:50px;overflow:hidden;margin:0 2px;display:inline-block;*zoom:1;border:3px solid transparent;opacity:.6;filter:alpha(opacity:60);}
    .gallery-thumb img {max-width:100px;max-height:100px;min-width:50px;min-height:50px;border:none;}
    .gallery-thumb .selected {border-color:#f60;opacity:1;filter:alpha(opacity:100);}
    </style>
</head>
<body style="height:2000px;">
 
<h1>画廊</h1>
<p class="img">
    <a href="https://images0.cnblogs.com/i/333689/201403/181012241467455.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181012064744754.jpg" alt=""></a>
    <a href="https://images0.cnblogs.com/i/333689/201403/181012428021756.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181012349904375.jpg" alt=""></a>
    <a href="https://images0.cnblogs.com/i/333689/201403/181012573656772.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181012512096320.jpg" alt=""></a>
    <a href="https://images0.cnblogs.com/i/333689/201403/181013163811731.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181013035524683.jpg" alt=""></a>
    <a href="https://images0.cnblogs.com/i/333689/201403/181013442711411.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181013354124216.jpg" alt=""></a>
</p>
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
/*
* jquery gallery JS
* ZhaoHuanLei - 20140418
*/
 
;(function($) {
    $.fn.extend({
        gallery: function() {
            $(this).on("click", function() {
                var self = $(this),
                    link = self.parent().find("a"),
                    bd = $("body");
                    html = "\
                        <div class='gallery-overlay'>\
                            <div class='gallery-photo'><span></span><img src='"+ self.attr("href") +"'></div>\
                            <div class='gallery-thumb'></div>\
                            <a class='gallery-prev' href='javascript:;' title='上一个'>&lt;</a>\
                            <a class='gallery-next' href='javascript:;' title='下一个'>&gt;</a>\
                            <a class='gallery-close' href='javascript:;' title='关闭'>&times;</a>\
                        </div>\
                    ";
                bd.css("overflow-y", "hidden").append(html);
                var overlay = $(".gallery-overlay"),
                    photo = $(".gallery-photo"),
                    photoImg = photo.find("img"),
                    thumb = $(".gallery-thumb"),
                    prev = $(".gallery-prev"),
                    next = $(".gallery-next"),
                    close = $(".gallery-close"),
                    str = "";
 
                //浏览器缩放时候，重置
                function toResize() {
                    var height = $(window).height();
                    overlay.height(height);
                    photo.css({"height": height - 200});
                    photoImg.css({"max-height": height - 200});//解决safari下bug
                }
                toResize();
                $(window).resize(function() {
                    toResize();
                });
 
                //生成缩略图列表
                link.each(function() {
                    var href = $(this).attr("href"),
                        src = $(this).find("img").attr("src"),
                        act = "<a href='"+ href +"'><img src='"+ src +"'/></a>";
                    str += act;
                });
                thumb.append(str);
 
                //图片切换
                var thumbLink = thumb.find("a"),
                    len = thumbLink.length - 1,
                    index = link.index(this);
                function switchPhoto(index) {
                    var _this = thumbLink.eq(index);
                    _this.addClass("selected").siblings().removeClass("selected");
                    photo.find("img").attr("src", _this.attr("href"));
                }
                switchPhoto(index);
 
                thumb.on("click", "a", function() {
                    index = thumbLink.index(this);
                    switchPhoto(index);
                    return false;
                });
 
                //切换下一个
                function switchPrev() {
                    index--;
                    if (index < 0) {
                        index = len;
                    }
                    switchPhoto(index);
                }
                //切换上一个
                function switchNext() {
                    index++;
                    if (index > len) {
                        index = 0;
                    }
                    switchPhoto(index);
                }
 
                prev.on("click", function() {
                    switchPrev();
                });
                next.on("click", function() {
                    switchNext();
                });
                photo.on("click", "img", function() {
                    switchNext();
                });
 
                //关闭层
                function closeOverlay() {
                    overlay.remove();
                    bd.css("overflow-y", "auto");
                }
                close.on("click", function() {
                    closeOverlay();
                });
 
                return false;
            });
        }
    });
})(jQuery);
</script>
<script>
$(function() {
    $('.img a').gallery();
});
</script>
</body>
</html>

20140317上传

JQuery插件代码：

/*
* jquery gallery JS
* ZhaoHuanLei - 20140317
*/
 
;(function($) {
    $.fn.extend({
        gallery: function() {
            $(this).on("click", function() {
                var self = $(this),
                    link = self.parent().find("a"),
                    bd = $("body");
                    html = "\
                        <div class='gallery-overlay'>\
                            <div class='gallery-photo'><span></span><img src='"+ self.attr("href") +"'></div>\
                            <div class='gallery-thumb'></div>\
                            <a class='gallery-prev' href='javascript:;' title='上一个'>&lt;</a>\
                            <a class='gallery-next' href='javascript:;' title='下一个'>&gt;</a>\
                            <a class='gallery-close' href='javascript:;' title='关闭'>&times;</a>\
                        </div>\
                    ";
                bd.css("overflow-y", "hidden").append(html);
                var overlay = $(".gallery-overlay"),
                    photo = $(".gallery-photo"),
                    thumb = $(".gallery-thumb"),
                    prev = $(".gallery-prev"),
                    next = $(".gallery-next"),
                    close = $(".gallery-close"),
                    str = "";
 
                //浏览器缩放时候，重置
                function toResize() {
                    var height = $(window).height();
                    overlay.height(height);
                    photo.css({"height": height - });
                    photo.find("img").css({"max-height": height - });//解决safari下bug
                }
                toResize();
                $(window).resize(function() {
                    toResize();
                });
 
                //生成缩略图列表
                link.each(function() {
                    var href = $(this).attr("href"),
                        src = $(this).find("img").attr("src"),
                        act = "<a href='"+ href +"'><img src='"+ src +"'/></a>";
                    str += act;
                });
                thumb.append(str);
 
                //图片切换
                var thumbLink = thumb.find("a"),
                    len = thumbLink.length - ,
                    index = link.index(this);
                function imgSwitch(index) {
                    var _this = thumbLink.eq(index);
                    _this.addClass("selected").siblings().removeClass("selected");
                    photo.find("img").attr("src", _this.attr("href"));
                }
                imgSwitch(index);
 
                thumb.on("click", "a", function() {
                    index = thumbLink.index(this);
                    imgSwitch(index);
                    return false;
                });
                prev.on("click", function() {
                    index--;
                    if (index < ) {
                        index = len;
                    }
                    imgSwitch(index);
                });
                next.on("click", function() {
                    index++;
                    if (index > len) {
                        index = ;
                    }
                    imgSwitch(index);
                });
 
                //关闭层
                function closeOverlay() {
                    overlay.remove();
                    bd.css("overflow-y", "auto");
                }
                close.on("click", function() {
                    closeOverlay();
                });
 
                return false;
            });
        }
    });
})(jQuery);

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画廊</title>
    <link rel="stylesheet" href="style/jquery.gallery.css">
</head>
<body style="height:2000px;">
 
<h1>画廊</h1>
<p class="img">
    <a href="https://images0.cnblogs.com/i/333689/201403/181012241467455.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181012064744754.jpg" alt=""></a>
    <a href="https://images0.cnblogs.com/i/333689/201403/181012428021756.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181012349904375.jpg" alt=""></a>
    <a href="https://images0.cnblogs.com/i/333689/201403/181012573656772.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181012512096320.jpg" alt=""></a>
    <a href="https://images0.cnblogs.com/i/333689/201403/181013163811731.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181013035524683.jpg" alt=""></a>
    <a href="https://images0.cnblogs.com/i/333689/201403/181013442711411.jpg"><img src="https://images0.cnblogs.com/i/333689/201403/181013354124216.jpg" alt=""></a>
</p>
 
<script src="script/jquery-1.11.0.min.js"></script>
<script src="script/jquery.gallery.js"></script>
<script>
$(function() {
    $('.img a').gallery();
});
</script>
</body>
</html>

CSS：

/*
* jquery gallery CSS
* ZhaoHuanLei - 20140317
*/
.gallery-overlay {width:%;height:%;position:fixed;_top:absolute;top:;left:;z-index:;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000');background-color:rgba(,,,.);}
:root .gallery-overlay {filter:none;}
.gallery-close,
.gallery-prev,
.gallery-next {position:absolute;color:#fff;text-decoration:none;}
.gallery-prev,
.gallery-next {top:%;font:bold 80px/80px simsun;}
.gallery-prev {left:50px;}
.gallery-next {right:50px;}
.gallery-close {width:82px;height:77px;top:;right:;background:url(../images/gallery-close.png) no-repeat;text-indent:-9999em;}
.gallery-photo {width:%;height:%;position:absolute;top:50px;vertical-align:middle;text-align:center;}
.gallery-photo span {height:%;display:inline-block;vertical-align:middle;}
.gallery-photo img {max-width:%;max-height:%;vertical-align:middle;}
.gallery-thumb {width:%;height:56px;position:absolute;bottom:50px;text-align:center;font-size:;}
.gallery-thumb a {width:50px;height:50px;overflow:hidden;margin: 2px;display:inline-block;*zoom:;border:3px solid transparent;opacity:.;filter:alpha(opacity:);}
.gallery-thumb img {max-width:100px;max-height:100px;min-width:50px;min-height:50px;border:none;}
.gallery-thumb .selected {border-color:#f60;opacity:;filter:alpha(opacity:);}

PS：

1、基本功能实现了，没搞什么选项设置，有时间再扩展，现在已经满足需求了。。

2、公司的项目只需要兼容IE7+兼容就可以。so。。。IE6就没考虑了。。

jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。的更多相关文章

不定义JQuery插件，不要说会JQuery[转载]
http://www.cnblogs.com/xcj26/p/3345556.html 不定义JQuery插件,不要说会JQuery 一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页 ...
不定义JQuery插件，不要说会JQuery 分类： JavaScript 2014-11-24 14:18 155人阅读评论(0) 收藏
一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
[转]不定义JQuery插件，不要说会JQuery
一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...
不定义JQuery插件，不要说会JQuery
转自:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...
转：不会定义jQuery插件，不要说会jQuery
一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
转载：不定义JQuery插件，不要说会JQuery
转载:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...
（转）不定义JQuery插件，不要说会JQuery
原文地址:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#" ...
使用jQuery插件时避免重复引入jquery.js文件
当一个页面使用多个jQuery插件时,需要避免重复引入jquery.js文件,因为后面映入的jQuery.js文件中定义的jQuery对象会覆盖掉前面的jQuery对象,导致之前定义的jQuery插件 ...
使用PHP打造QQ空间神奇图片
说明你一定在qq空间遇到过这样的东西:打开一张图片,上面有你的QQ号和昵称,你觉得很神奇,是不是? 其实原理很简单,那张图片是动态生成的,上面显示的信息是根据你访问的Url获得的,然后用程序动态的画 ...

随机推荐

Python中文字符串截取
#-*- coding:utf8 -*- s = u'中文截取' s.decode('utf8')[0:3].encode('utf8') # 结果u'中文截取延伸阅读: UTF-8中的汉字占用多少 ...
VPS CentOS-6 下 LNMP HTTP服务器的搭建
VPS CentOS-6 下 LNMP HTTP服务器的搭建前言恢复更新后的第一篇博文, 前段时间由于各种理由, 把博客更新给宕掉了, 个人独立博客的开发也搁浅了, 现在随着工作的逐步稳定, 决心 ...
windows下重启mysql
其中第二种方法对我这无效,以后再搞清楚! 一.MYSQL服务我的电脑——(右键)管理——服务与应用程序——服务——MYSQL——开启(停止.重启动) 二.命令行方式 Windows 1.点击“开始” ...
喜迎2015年新年：坦克大战(Robocode)游戏编程比赛图文总结
2015春节前,葡萄城的软件工程师以特有的方式来迎接新年——2015新年编程邀请赛. 邀请赛的初衷,是和大家一起,寻找编程最初的单纯的快乐. 在代码的世界里,添加动力,继续远航. ...
Firefox SVG getBBox方法返回'NS_ERROR_FAILURE'错误分析
在SVG中,我们无法给Text元素设置Width和Height属性,因此无法直接获取Text元素的高和宽.如果想要给Text元素添加背景色,最简单的办法就是在Text元素的下面添加Rect,然后给Re ...
bigautocomplete实现联想输入，自动补全
bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax ...
winform下重画ListBox
Windows Forms是由Win32 API封装的开发组件,最初是为了替代mfc,但却没有体现与Model View Controller架构对应的特色,进而在.net framework 3.0 ...
mysql高级排序&高级匹配查询示例
在大多数应用场景下,我们使用mysql进行查询时只会用到'=', '>' , '<' , in, like 等常用的方法,看起来,大多数情况下,已经足以应付我们的小型应用了.不过,在一些特 ...
beego中orm关联查询使用解析
这两天在学习beego框架,之前学习的时候遗漏了很多东西,比如orm.缓存.应用监控.模板处理等,这里将通过实例记录下如何使用beego自带的orm进行关联查询操作. 首先说明下,beego的orm有 ...
JVM中的Stack和Frame
JVM执行Java程序时需要装载各种数据,比如类型信息(Class).类型实例(Instance).常量数据(Constant).本地变量等.不同的数据存放在不同的内存区中,这些数据内存区称作“运行时 ...

jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。