메뉴 건너뛰기

프로그램언어

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 라디오 버튼 체크 2014.03.01 5451
126 라디오 버튼 value 값 있는지 체크하기 2014.02.27 6336
125 라디오 바스 체크 유무 확인 2015.02.03 6349
124 따라다니는 배너 2014.03.17 6270
123 디자이너를 위한 레이어 탭 더 빠르게 만들기 2016.09.11 5266
122 드롭다운 메뉴를 만들어보자! -1탄 file 2015.02.03 8168
121 두 날짜 사이 토일요일 개수 구하기 2019.01.16 1249
120 도메인 체크 2016.12.22 5928
119 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) 2021.08.20 261
118 달력 2015.02.03 6682
117 다음 우편번호(주소) api 예시 file 2018.07.04 4903
116 네이버 달력 자바스크립트 소스 2014.02.27 6329
115 날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker file 2017.04.06 16532
114 날짜 계산하기 (년/월/일 더하기, 빼기) 2021.08.20 2356
113 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 2021.08.20 1540
112 날짜 간의 일수 계산 2014.02.27 7551
111 깔끔한 이미지로 2014.02.27 6259
110 기간 설정용 달력 팁앤노하우 2019.01.16 1137
109 금액에 점찍고 한글 표시하기 2019.01.16 1271
108 구구단 반복문,조건문 변경해서 만들기 2016.09.11 6091
쓰기
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