朽木

<style>
#lightbox{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999!important;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: rgba(35,35,35,.7);
    *background:rgb(35,35,35);
    *filter: alpha(opacity=95);
}
/*ie6 fix*/
* html { background:url(*) fixed; }
* html body { margin:0; height:100%; }
* html #lightbox { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
#lightbox p{
    background: url("img/loader.gif") no-repeat center center;
    height: 100%;
    width: 100%;
    line-height: 1px;
    text-align: center;
    display: inline-block;
}
#lightbox img{
    display: inline-block;
    max-width: 100%;
    margin: 0;
    margin-top: 3%;
    padding: 0;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 15px solid #fff;
}
</style>
<script>
(function($) {
$.fn.lightBox = function() {
    $(this).bind("click",function () {
        var url = $(this).attr("href");
        if ($("#lightbox").length == 0) {
            $("body").append('<div id="lightbox"><p><img src="'+url+'" /></p></div>');
            $("#lightbox").click(function (event) {
                $(this).fadeOut().remove();
                event.stopPropagation();
            })
        }
        return false;
    });
};
})(jQuery);
 
$(document).ready(function() {
    $('a[href$="jpg"],a[href$="png"],a[href$="gif"]').lightBox();
});
</script>