메뉴 건너뛰기

프로그램언어

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 iframe 자동 리사이즈 2014.03.01 5992
126 함수의 arguments 를 이름(key)으로 접근하기 2016.09.21 5976
125 버튼 삭제 2015.02.03 5951
124 iframe을 리로드 하자! 2014.03.01 5933
123 도메인 체크 2016.12.22 5928
122 배너 램덤으로 부여주기 2014.03.01 5911
121 주민등록번호 체크 file 2014.03.01 5908
120 셀렉트(select) change href 이벤트 2016.12.23 5899
119 간단하게 우클릭 막는방법 2016.09.11 5879
118 iframe 높이 자동으로 잡아주기 2014.03.01 5855
117 스타일로 제목 자르기 2016.09.12 5833
116 (소스)jqury 롤오버 버튼 쉽게 만들기 file 2014.03.01 5784
115 select 당일 날짜 출력 file 2014.03.01 5780
114 자바스크립트 모음 2016.12.22 5778
113 3자리마다 콤마찍기 2014.02.27 5755
112 top 부분이 고정되는 슬라이딩 메뉴입니다 file 2014.03.01 5752
111 이전, 위로 이동 2016.12.23 5740
110 문자열 바꾸기 2015.02.03 5729
109 새창을 띠워서 focus주기 2014.03.01 5715
108 checkbox 한개 클릭으로 다른모든 checkbox 클릭되게 하기 2014.03.01 5709
쓰기
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