jQuery 图片弹出层显示

2019独角兽企业重金招聘Python工程师标准>>>

// JavaScript Document
;(function($){
    //显示大图预览
    $.showImageInWin=function(src,op){
        op=$.extend({
            maxWidth:960,//最大宽度
            width:0,
            height:0,
            showCloseId:'siiw_close_photo',//显示关闭按钮的ID 空或则false不显示
            next:function(off,$btn){},//下一个调用方法 没有不显示 需要返回下一张图片的地址
            prev:function(){}//前一个 需要返回上一张图片的地址
        },op);
        var $load=$.fn.loading().css('z-index',202),$close,$win,$left,$right;
        var img= new Image;
        var offset=0,init_load=0;//当前左右偏移
        // 显示蒙板
        $.fn.overlay('siiw_overlay',{closeOnClick:true,hide:function(){
            _close();
        }});
        if(op.showCloseId){
            // 显示关闭按钮
            $close=$('#'+op.showCloseId);
            if($close.length==0){
                $close=$('<span id="'+op.showCloseId+'">&#xe808;</span>').appendTo('body');
            }
            $close.one('click',function(){
                _close();
            });
            $close.show();
        }
        loadImg(src,op.width,op.height);
        if(typeof op.next == 'function'){
            var $left=$('#siiw_left_photo');
            if(!$left.length){
                $left=$('<a id="siiw_left_photo">&#xe80c;</a>').appendTo('body');
            }
            $left.click(function(){
                var tsrc=op.next(offset-1,$left);
                var types=typeof(tsrc);
                if(types == 'string'){
                    offset--;
                    loadImg(tsrc,0,0);
                }else if(types == 'object'){
                    offset--;
                    // 返回对象格式({src:'图片地址',width:'图片宽',height:'图片高'})
                    loadImg(tsrc.src,tsrc.width,tsrc.height);
                }else{
                    $.alert('第一张了',500);
                }
            }).show();
        }
        if(typeof op.prev == 'function'){
            var $right=$('#siiw_right_photo');
            if(!$right.length){
                $right=$('<a id="siiw_right_photo">&#xe80f;</a>').appendTo('body');
            }
            $right.click(function(){
                var tsrc=op.prev(offset+1,$right);
                var types=typeof(tsrc);
                if(types == 'string'){
                    offset++;
                    loadImg(tsrc,0,0);
                }else if(types == 'object'){
                    offset++;
                    // 返回对象格式({src:'图片地址',width:'图片宽',height:'图片高'})
                    loadImg(tsrc.src,tsrc.width,tsrc.height);
                }else{
                    $.alert('没有了',500);
                }
            }).show();
        }

        // 加载图片
        function loadImg(imgsrc,width,height){
            if(width && height){
                showCurImg(imgsrc,width,height);
                $load.hide();
                return;
            }else if(!init_load){
                init_load=1;
                img.onload = function(){
                    $load.hide();
                    showCurImg(img.src,this.width,this.height);
                };
            }
            $load.show();
            img.src = imgsrc;
        }
        // 显示图片
        function showCurImg(imgsrc,realWidth,realHeight){
            src=imgsrc;

            var $img=$('<img ontouchstart="return false" οncοntextmenu="return false" onselectstart="return false" οncοpy="return false" src="'+imgsrc+'" />');
            //如果真实的宽度大于浏览器的宽度就按照100%显示
            if(realWidth>=op.maxWidth){
                width=op.maxWidth;
                height=parseInt(realHeight*(width/realWidth));
            }else{
                width=realWidth;
                height=realHeight;
            }
            $win=$.popWindow({
                id:'siiw_win_photo',
                showClass:'opacityIn',
                width:width,
                content:function($c){
                    $img.css({width:width,height:height});
                    $c.append($img);
                },
                sureBtn:{txt:''},
                cancelBtn:{txt:''}
            });
            $win.addClass('an');
        }
        // 关闭
        function _close(){
            $.hideWindow('siiw_win_photo',1);
            $.fn.overlayHide('siiw_overlay');
            $load.hide();
            if(op.showCloseId){
                $close.hide().unbind('click');
            }
            if($left){
                $left.hide().unbind('click');
            }
            if($right){
                $right.hide().unbind('click');
            }
        }
    }
    $.fn.nl2br=function(){
        this.each(function(){
            $t=$(this);
            var str=$t.html();
            str=TextStr.nl2br(str);
            str=TextStr.replaceLink(str);
            $t.html(str);
        });
        return this;
    }
})(jQuery);

转载于:https://my.oschina.net/u/1468096/blog/1609537