ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [자바스크립트]본문내 실제 이미지 크기가 설정값 이상이면 레이어로 크게 보기
    컴터/Javascript / html 2011. 2. 24. 09:24

    /////////////이전한 디비에서의 큰 사진 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>

    댓글 0

Designed by Tistory.