메뉴 건너뛰기

프로그램언어

Home 프로그램언어 JAVA javascript
✔ 뷰어로 보기
2015.06.19 12:53

예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그)

조쉬
조회 수 6798 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부


 [코드]

Image_newWindowPopupExam3.html 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="mw_image_window.js"></script>
</head>
<body>

<img id="myImg1" src="bigc.png" onclick="mw_image_window(this)" style="width:300px;height:98px;"> 
<img id="myImg3" src="bigc1.png" onclick="mw_image_window(this)" style="width:300px;height:98px;"> 
<img id="myImg2" src="smallc.jpg" onclick="mw_image_window(this)" style="width:300px;height:98px;"> 

<p>Click the button to return the original size and the "new/styled" size of the image.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    
    var resultStr = "";

    $("img").each(function(index,item){ 
        
        console.log(item);
        var xw = item.naturalWidth; //이미지의 원래 가로크기
        var xh = item.naturalHeight; //이미지의 원래 세로크기
        
        var yw = item.width; //이미지의 가로크기
        var yh = item.height; //이미지의 세로크기
        

        resultStr += "이미지아이디: "+item.id;
        resultStr += "<br/>";
        resultStr += "이미지의 원래 크기(w*h) : " + xw + "*" + xh ;
        resultStr += "<br/>";
        resultStr += "이미지의 현재(Styled) 크기(w*h) : " + yw + "*" + yh ;
        resultStr += "<br/>";
        resultStr += "<br/>";
        
    });    

    $("#demo").html(resultStr);
}
</script>

</body>
</html>

 mw_image_window.js

Colored By Color Scripter™

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

function mw_image_window(img, w, h)
{
    //이미지 url을 가지고 새로운 이미지 객체를 생성해주는 내부 함수.
    function newImg(url) { 
        var i = new Image;
        i.src = url;
        return i;
    }

    //width 또는 height의 값을 전달 받지 않았을 경우 이미지의 원래크기로 세팅
    if (!w || !h) 
    {        
        if( 'naturalWidth' in (new Image)) { //Image객체에 naturalWidth 의 프로퍼티가 있을경우
            var w = img.naturalWidth; //이미지의 원래 가로크기
            var h = img.naturalHeight; //이미지의 원래 세로크기
        }else {
            //전달 받은 이미지 주소를 가지고 새로운 이미지객체 생성
            //새로 생성된 이미지 객체를 통해서 이미지의 원래크기를 구함.
            var w = newImg(img.src).width; 
            var h = newImg(img.src).height;
        }        
    }
    
    //img.src= img.src.replace("/thumbnail", ""); 

    var winl = (screen.availWidth-w)/2; 
    var wint = (screen.availHeight-h)/3; 

    var winW = w;
    var winH = h;

    //이미지크기가 화면의 크기보다 클경우 처리
    if (winW > screen.availWidth) { 
        winl = 0;
        winW = screen.availWidth - 43
        
    }    
    if (winH > screen.availHeight) {
        wint = 0;
        winH = screen.availHeight - 83
    }

    console.log("=============================");
    console.log("ImgWidth: "+w+"/ImgHeight: "+h);
    console.log("winWidth: "+winW+"/winHeight: "+winH);
    console.log("winleft: "+winl+"/wintop: "+wint);
    console.log("=============================");

    var js_url = "<script language='JavaScript1.2'> \n"; 
        js_url += "<!-- \n"; 
        js_url += "var ie=document.all; \n"; 
        js_url += "var nn6=document.getElementById&&!document.all; \n"; 
        js_url += "var isdrag=false; \n"; 
        js_url += "var x,y; \n"; 
        js_url += "var dobj; \n"; 
        js_url += "function movemouse(e) \n"; 
        js_url += "{ \n"; 
        js_url += "  if (isdrag) \n"; 
        js_url += "  { \n"; 
        js_url += "    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; \n"; 
        js_url += "    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y; \n"; 
        js_url += "    return false; \n"; 
        js_url += "  } \n"; 
        js_url += "} \n"; 
        js_url += "function selectmouse(e) \n"; 
        js_url += "{ \n"; 
        js_url += "  var fobj      = nn6 ? e.target : event.srcElement; \n"; 
        js_url += "  var topelement = nn6 ? 'HTML' : 'BODY'; \n"; 
        js_url += "  while (fobj.tagName != topelement && fobj.className != 'dragme') \n"; 
        js_url += "  { \n"; 
        js_url += "    fobj = nn6 ? fobj.parentNode : fobj.parentElement; \n"; 
        js_url += "  } \n"; 
        js_url += "  if (fobj.className=='dragme') \n"; 
        js_url += "  { \n"; 
        js_url += "    isdrag = true; \n"; 
        js_url += "    dobj = fobj; \n"; 
        js_url += "    tx = parseInt(dobj.style.left+0); \n"; 
        js_url += "    ty = parseInt(dobj.style.top+0); \n"; 
        js_url += "    x = nn6 ? e.clientX : event.clientX; \n"; 
        js_url += "    y = nn6 ? e.clientY : event.clientY; \n"; 
        js_url += "    document.onmousemove=movemouse; \n"; 
        js_url += "    return false; \n"; 
        js_url += "  } \n"; 
        js_url += "} \n"; 
        js_url += "document.onmousedown=selectmouse; \n"; 
        js_url += "document.onmouseup=new Function('isdrag=false'); \n"; 
        js_url += "function resizeWindow(){ \n";    
        js_url += "     var fullHeight = screen.availHeight; \n";    
        js_url += "     var fullWidth = screen.availWidth;     \n";    
        js_url += "     var imgWidth = "+ (w + 43) + "\n";    
        js_url += "     var imgHeight = " + (h + 83) + "\n";    
        js_url += "     if (imgWidth > fullWidth) { \n";    
        //js_url += "         window.moveTo(0,0); \n";    
        js_url += "          imgWidth = fullWidth; \n";    
        js_url += "     } \n";    
        js_url += "     if (imgHeight > fullHeight) { \n";    
        js_url += "          imgHeight = fullHeight; \n";    
        js_url += "     } \n";    
        
        js_url += "     window.resizeTo(imgWidth, imgHeight); \n";    
        js_url += "} \n";    
        js_url += "window.onload = function(){ \n";    
        js_url += "     resizeWindow(); \n";    
        js_url += "     document.oncontextmenu = function (){return false;}; \n";    
        js_url += "     document.ondragstart = function(){return false;}; \n";    
        js_url += "     document.onselectstart = function(){return false;}; \n";    
        js_url += "} \n";    

        
        
        js_url += "//--> \n"; 
        js_url += "</"+"script> \n"; 

    
    var settings;    //새창의 옵션을 저장할 변수

    //케코 레이아웃 엔진을 사용하는지 여부 
    var is_gecko = navigator.userAgent.toLowerCase().indexOf("gecko") >= -1;
    
    var settings;

    if (is_gecko) {
        settings  ='width='+(winW+10)+','; 
        settings +='height='+(winH+10)+','; 
    } else {
        settings  ='width='+winW+','; 
        settings +='height='+winH+','; 
    }
    settings +='top='+wint+','; 
    settings +='left='+winl+','; 
    settings +='scrollbars=no,'; 
    settings +='resizable=yes,'; 
    settings +='status=no'; 


    win=window.open("","image_window",settings); 
    win.document.open(); 
    win.document.write ("<html><head> \n<meta http-equiv='imagetoolbar' CONTENT='no'> \n"); 
    win.document.write ("<meta http-equiv='content-type' content='text/html; charset=UTF-8'>\n"); 
    var size = "이미지 사이즈 : "+w+" x "+h;
    win.document.write ("<title>"+size+"</title> \n"); 
    if(w >= screen.width || h >= screen.height) { //이미지 크기가 화면보다 더 클경우 리사이즈 및 드래그할수있는 스크립트 추가 
        win.document.write (js_url); 
        var click = "ondblclick='window.close();' style='cursor:move' title=' "
                    +size+" \n\n 이미지 사이즈가 화면보다 큽니다. "
                    +"\n 왼쪽 버튼을 클릭한 후 마우스를 움직여서 보세요. \n\n 더블 클릭하면 닫혀요. '"; 
    } 
    else 
        var click = "onclick='window.close();' style='cursor:pointer' title=' "+size+" \n\n 클릭하면 닫혀요. '"; 
    win.document.write ("<style>.dragme{position:relative;}</style> \n"); 
    win.document.write ("</head> \n\n"); 
    win.document.write ("<body leftmargin=0 topmargin=0 bgcolor=#dddddd style='cursor:arrow;'> \n"); 
    win.document.write ("<table width=100% height=100% cellpadding=0 cellspacing=0>");
    win.document.write ("<tr><td align=center valign=middle>");
    win.document.write ("<img src='"+img.src+"' width='"+w+"' height='"+h+"' border=0 class='dragme' "+click+">");
    win.document.write ("</td></tr></table>");
    win.document.write ("</body></html>"); 
    win.document.close(); 

    if(parseInt(navigator.appVersion) >= 4){win.window.focus();} 

}

 



 

 


 [코드]

화면사이즈보다 작은 이미지일경우 출력되는 문서내용​

 

Colored By Color Scripter™

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head> 
<meta http-equiv='imagetoolbar' CONTENT='no'> 
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>이미지 사이즈 : 375 x 500</title> 
<style>.dragme{position:relative;}</style> 
</head> 

<body leftmargin=0 topmargin=0 bgcolor=#dddddd style='cursor:arrow;'> 
    <table width=100% height=100% cellpadding=0 cellspacing=0><tr>
    <td align=center valign=middle>
    <img src='smallc.jpg' width='375' height='500' border=0 class='dragme' 
         onclick='window.close();' style='cursor:pointer' 
         title=' 이미지 사이즈 : 375 x 500 \n클릭하면 닫혀요. '>
    </td></tr>
    </table>
</body>
</html>

 화면사이즈보다 큰 이미지일경우 출력되는 문서내용

Colored By Color Scripter™

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html><head> 
<meta http-equiv='imagetoolbar' CONTENT='no'> 
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title>이미지 사이즈 : 1920 x 1200</title> 
<script language='JavaScript1.2'> 
<!-- 
var ie=document.all; 
var nn6=document.getElementById&&!document.all; 
var isdrag=false; 
var x,y; 
var dobj; 
function movemouse(e) 
{ 
  if (isdrag) 
  { 
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; 
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y; 
    return false; 
  } 
} 
function selectmouse(e) 
{ 
  var fobj      = nn6 ? e.target : event.srcElement; 
  var topelement = nn6 ? 'HTML' : 'BODY'; 
  while (fobj.tagName != topelement && fobj.className != 'dragme') 
  { 
    fobj = nn6 ? fobj.parentNode : fobj.parentElement; 
  } 
  if (fobj.className=='dragme') 
  { 
    isdrag = true; 
    dobj = fobj; 
    tx = parseInt(dobj.style.left+0); 
    ty = parseInt(dobj.style.top+0); 
    x = nn6 ? e.clientX : event.clientX; 
    y = nn6 ? e.clientY : event.clientY; 
    document.onmousemove=movemouse; 
    return false; 
  } 
} 
document.onmousedown=selectmouse; 
document.onmouseup=new Function('isdrag=false'); 
function resizeWindow(){ 
     var fullHeight = screen.availHeight; 
     var fullWidth = screen.availWidth;     
     var imgWidth = 1963
     var imgHeight = 1283
     if (imgWidth > fullWidth) { 
          imgWidth = fullWidth; 
     } 
     if (imgHeight > fullHeight) { 
          imgHeight = fullHeight; 
     } 
     window.resizeTo(imgWidth, imgHeight); 
} 
window.onload = function(){ 
     resizeWindow(); 
     document.oncontextmenu = function (){return false;}; 
     document.ondragstart = function(){return false;}; 
     document.onselectstart = function(){return false;}; 
} 
//--> 
</script> 
<style>.dragme{position:relative;}</style> 
</head> 

<body leftmargin=0 topmargin=0 bgcolor=#dddddd style='cursor:arrow;'> 
<table width=100% height=100% cellpadding=0 cellspacing=0><tr>
<td align=center valign=middle>
<img src='bigc.png' width='1920' height='1200' border=0 class='dragme' 
     ondblclick='window.close();' style='cursor:move' 
     title=' 이미지 사이즈 : 1920 x 1200 \n 이미지 사이즈가 화면보다 큽니다. 왼쪽 버튼을 클릭한 후 마우스를 움직여서 보세요. \n\n 더블 클릭하면 닫혀요. '>
</td>
</tr>
</table>
</body>
</html>

 

 

 

 


Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
List of Articles
번호 제목 날짜 조회 수
127 이동 가능한 레이어팝업 소스 2016.09.01 7166
126 모바일 홈페이지로 자동 이동하는 방법.... 2016.09.01 6745
125 특정 HTML DOM 엘레멘트로 스크롤 이동하기 2016.09.09 7075
124 이클립스 실행할때 자신이 원하는 JDK 지정하는 방법 file 2016.09.11 5439
123 JDK6 (Java SE Development Kit 6)이하 버전 다운로드 주소 file 2016.09.11 6165
122 간단하게 우클릭 막는방법 2016.09.11 5879
121 디자이너를 위한 레이어 탭 더 빠르게 만들기 2016.09.11 5266
120 부드럽게 페이지 이동하기 2016.09.11 6003
119 htaccess 자동으로 만들어주는 사이트 2016.09.11 5423
118 input radio 체크유무 검사 2016.09.11 5562
117 jquery 기본 엘리먼트 속성제어방법 2016.09.11 5518
116 구구단 반복문,조건문 변경해서 만들기 2016.09.11 6091
115 스타일로 제목 자르기 2016.09.12 5833
114 onkeypress 키보드 이벤트 처리하는 법 – text, textarea 2016.09.21 7001
113 javascript 에서 제공하는 3가지 종류의 팝업박스 2016.09.21 5657
112 연관배열 사용하기 2016.09.21 7134
111 arguments object 2016.09.21 5652
110 함수의 arguments 를 이름(key)으로 접근하기 2016.09.21 5976
109 현재시간 기준 날짜 계산 2016.09.21 6103
108 쿠키(Cookie)에 값 저장하기 2016.09.21 6952
쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© 2016 JOSHI. All Rights Reserved
© k2s0o1d4e0s2i1g5n. All Rights Reserved