jQuery插件實現圖片展開效果，jquery.gallery。仿騰訊QQ空間說說圖片展現效果。

時間 2019-11-06

標籤 jquery 插件實現圖片展開效果 jquery.gallery gallery 騰訊空間說說展現欄目 JQuery 简体版

原文原文鏈接

公司的項目http://www.umfun.com/，有個說說的頁面（和騰訊QQ空間說說同樣），裏面有個發表圖片功能，上傳完圖片，須要點擊展開的效果。javascript

當時手裏面事情比較多（公司就我一個前端），忙不過來，就用插件來實現了，試了fancyBox、lightbox等jQuery插件。插件都知足不了項目各類奇怪的需求，可是時間有限，只能先湊合了。、css

項目上線後，最近時間比較充足，我就想把寫個插件封裝一下。畢竟人家的插件比較臃腫，修改起來麻煩，同時省得之後又是各類修改，仍是根據公司的項目需求寫比較好。。。html

效果預覽，若是下圖所示：

點擊圖片後，展現：

2014-4-18更新

更新內容：一、兼容性問題；前端

　　　　　二、點擊大圖切換到下一張圖java

<!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 - 200});
                    photo.find("img").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 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 < 0) {
                        index = len;
                    }
                    imgSwitch(index);
                });
                next.on("click", function() {
                    index++;
                    if (index > len) {
                        index = 0;
                    }
                    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:100%;height:100%;position:fixed;_top:absolute;top:0;left:0;z-index:99;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000');background-color:rgba(0,0,0,.8);}
: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(../images/gallery-close.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;}
.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);}