메뉴 건너뛰기

프로그램언어

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
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
  1. 11Sep
    by
    2016/09/11 Views 5439 

    이클립스 실행할때 자신이 원하는 JDK 지정하는 방법

  2. No Image 23Dec
    by
    2016/12/23 Views 5740 

    이전, 위로 이동

  3. 19Jun
    by
    2015/06/19 Views 10871 

    이벤트 - 페이지 로드 후 이벤트 처리하기 ( window.onload )

  4. No Image 17Mar
    by
    2014/03/17 Views 5518 

    이미지클릭시 옆에 큰이미지나오기

  5. No Image 01Mar
    by
    2014/03/01 Views 6923 

    이미지에 마우스 올렸을때 확대 이미지 나오게 하기 (onmouseover

  6. No Image 01Mar
    by
    2014/03/01 Views 5238 

    이미지나 태그정렬이 안맞을때 absmiddle

  7. No Image 17Mar
    by
    2014/03/17 Views 9362 

    이미지 마우스 드래그로 스크롤을 움직이는 소스

  8. No Image 01Mar
    by
    2014/03/01 Views 5205 

    이메일 체크하기

  9. No Image 01Sep
    by
    2016/09/01 Views 7166 

    이동 가능한 레이어팝업 소스

  10. No Image 16Jan
    by
    2019/01/16 Views 112110 

    유효한 링크인지 확인하는 JAVASCRIPT

  11. 03Feb
    by
    2015/02/03 Views 6125 

    유효성 검사, 모든 폼에 값이 입력되도록 해보자!

  12. No Image 24Jul
    by
    2018/07/24 Views 2294 

    유용한 스크립트 모음

  13. No Image 20Aug
    by
    2021/08/20 Views 242 

    월의 마지막 날짜 계산하기

  14. No Image 23Dec
    by
    2016/12/23 Views 5701 

    우클릭 금지

  15. No Image 25Mar
    by
    2021/03/25 Views 237 

    오브젝트 속성

  16. No Image 07Nov
    by
    2018/11/07 Views 1416 

    오늘 날짜 구하기

  17. No Image 19Jun
    by
    2015/06/19 Views 10063 

    예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar)

  18. 19Jun
    by 조쉬
    2015/06/19 Views 6798 

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

  19. No Image 01Mar
    by
    2014/03/01 Views 5292 

    영문, 숫자, 한글, 이메일 체크 하는 함수

  20. No Image 21Sep
    by
    2016/09/21 Views 7134 

    연관배열 사용하기

쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

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