[자바스크립트]본문내 실제 이미지 크기가 설정값 이상이면 레이어로 크게 보기

resizePhoto.js

/////////////이전한 디비에서의 큰 사진 resize를 위해 /////////////////
var resizePhoto = {
    vars : {"width":600, "element":"articleBody"},//초기값.. 뭐하면 본문 테이블 넓이를 재어 와도 됨, 한정지을 elementById

    bind:function(obj, evt, fun){
        if(obj.addEventListener)    obj.addEventListener(evt, fun, false);
        else obj.attachEvent("on"+evt, fun);
    },

    init:function(){
        var  imgs = document.getElementById(resizePhoto.vars.element);///한정할 부분 .. 여기선 기사 본문 이니 거기부터 이미지 탐색

        if(imgs && imgs!="undefined"){
            resizePhoto.vars.imgs=imgs;
            resizePhoto.findImgTags();
        }        
    },

    findImgTags:function(){//이미지 찾기
        var imgs = this.vars.imgs.getElementsByTagName('img');
        if(imgs.length>0){
            this.vars.imgObj=imgs;
            this.sizeOf();
        }
    },
    
    realSize:function(src){
        var img = document.createElement("img");
        img.src = src; //추가 시킨후 크기만 재어 옴
        
        var _w = img.width;
        var _h = img.height;
        //document.body.appendChild(img);    
        //document.body.removeChild(img);//꿀럭 거리는게 싫어서 주석, 무슨일 있으려나 ㅡㅡa
        return {w:_w, h:_h};
    },

    sizeOf:function(){//사이즈 조절
        var obj = this.vars.imgObj;

        for(var i=0; i<obj.length; i++){
            var realWidth = this.realSize(obj[i].src).w;//실제 넓이

            if(realWidth>this.vars.width && obj[i].width!="undefined"){
                var w = obj[i].width;//태그 넓이
                var h = obj[i].height;
                var src = obj[i].src;

                obj[i].setAttribute("width", w<this.vars.width?w:this.vars.width);
                obj[i].setAttribute("title", "클릭하면 큰 이미지로 볼수 있습니다.");
                obj[i].style.border = "2px solid #f4f4f4";
                this.clickPhotoEvt(obj[i], src, realWidth, h);
            }            
        }
    },

    clickPhotoEvt:function(obj, src, w, h){//이벤트 줌
        obj.style.cursor = "pointer";

        this.bind(obj, "mouseover", function(){
                                    obj.style.border = "2px solid #696969";
                                });

        this.bind(obj, "mouseout", function(){
                                    obj.style.border = "2px solid #f4f4f4";
                                });
        this.bind(obj, "click", function(){                                    
                                    resizePhoto.clickPhoto(src, w, h);
                                });

    },
    
    clickPhoto:function(src, w, h){//클릭
        this.positionLayer(src, w, h);
        this.bind(window, "resize", function(){  
                                                    if(document.getElementById("imgResizeView") || document.getElementById("imgResizeBox")){
                                                        resizePhoto.closeLayer();//리사이즈 하기전 제거
                                                        resizePhoto.positionLayer(src, w, h);
                                                    }else{//remove event
                                                        if(window.removeEventListener) window.removeEventListener("resize");
                                                        else window.detachEvent("resize");
                                                    }
                                                 });
    },

    positionLayer:function(src, w, h){//이미지 띄우기 실행
        var cw = document.body.clientWidth >  document.body.scrollWidth ? document.body.clientWidth : document.body.scrollWidth;
        var ch = document.body.clientHeight > document.body.scrollHeight ? document.body.clientHeight : document.body.scrollHeight;
        var st = document.body.scrollTop;
        
        var xc = cw>w ? (cw/2)-(w/2) : 0; //가운데 찾기
        var tp = st + 10; //위로 부터 띄워서

        var tw = cw>w ? cw : w; //레이어크기 , 이미지가 더 크다면 이미지 크기로
        var th = (ch>h ? ch : h)+tp; //레이어크기 , 이지가 더 크다면 이미지 크기로 + 스크롤탑
        
        xc = parseInt(xc);
        tp = parseInt(tp);
        tw = parseInt(tw);
        th = parseInt(th);

        //background div
        var div = document.createElement("div");
        div.setAttribute("width", tw);
        div.setAttribute("height", th);
        div.setAttribute("id", "imgResizeView");
        div.setAttribute("title", "클릭하면 이미지가 사라집니다.");
        div.style.position = "absolute";
        div.style.width = tw + "px";
        div.style.height = th + "px";
        div.style.top = "0px";
        div.style.left = "0px";
        div.style.backgroundColor = "#ccc";
        div.style.opacity = "0.5";
        div.style.filter = "alpha(opacity:50)";
        div.style.cursor = "pointer";
        this.bind(div, "click", resizePhoto.closeLayer);
        //if(div.addEventListener)    div.addEventListener("click", resizePhoto.closeLayer, false);
        //else div.attachEvent("onclick", resizePhoto.closeLayer);


        //이미지 div    
        var imgDiv = document.createElement("div");
        imgDiv.setAttribute("width", w);
        imgDiv.setAttribute("height", h);
        imgDiv.setAttribute("id", "imgResizeBox");
        imgDiv.setAttribute("title", "클릭하면 이미지가 사라집니다.");
        imgDiv.style.position = "absolute";
        imgDiv.style.top = tp + "px";
        imgDiv.style.left = xc + "px";
        imgDiv.style.width = w + "px";
        imgDiv.style.height = h + "px";
        imgDiv.style.backgroundImage = "url("+src+")";
        imgDiv.style.cursor = "pointer";
        imgDiv.style.border = "3px solid #666";
        this.bind(imgDiv, "click", resizePhoto.closeLayer);
        //if(imgDiv.addEventListener)    imgDiv.addEventListener("click", resizePhoto.closeLayer, false);
        //else imgDiv.attachEvent("onclick", resizePhoto.closeLayer);
        
        /*그냥 백그라운드로 씌움
        var img = document.createElement("img");
        img.setAttribute("width", w);
        img.setAttribute("height", h);
        img.setAttribute("src", src);        
        img.style.width = w + "px";
        img.style.height = h + "px";
        img.style.cursor = "pointer";
        img.setAttribute("title", "클릭하면 이미지가 사라집니다.");
        if(img.addEventListener)    img.addEventListener("click", resizePhoto.closeLayer, false);
        else img.attachEvent("onclick", resizePhoto.closeLayer);
        
        imgDiv.appendChild(img);
        */
        

        document.body.appendChild(div); /////레이어 뜸.
        document.body.appendChild(imgDiv);    //그위에 이미지(img는 absolute ;;;
    },

    closeLayer:function(){
        var div = document.getElementById("imgResizeView");
        var imgbox = document.getElementById("imgResizeBox");

        if(imgbox) document.body.removeChild(imgbox);
        if(div) document.body.removeChild(div);
    }
}



사용법...줄이고자하는 페이지에 넣어줌
<script type="text/javascript">
    resizePhoto.bind(window, 'load', resizePhoto.init);
</script>