안녕하세여 ^-6
이번에는 쇼핑몰이나 이미지 게시판에서 많이 사용되는 기능이에요.
여러가지 jquery를 활용한 라이브러리도 많지만
먼저 팝업을 이용한 확대 기능을 소개할게요!(jquery 플러그인은 다음에^^)
대부분이 사용자들에게 보여지는 이미지는 썸네일을 보여주죠.
파일 용량이 크면 사용자들에게 보여지기에 시간문제 때문에 ㅠㅠ..
그래서 썸네일을 실제 크기로 보고 싶어 하는 사용자가 있어서 이런기능이 생겨난거같아요
(100%제생각...)
1. 아래의 소스는 썸네일이 보여주는 페이지의 자바스크립트 함수에요. 썸네일이 보여지는 페이지에서 어떠한 버튼을 클릭하면 imageView함수를 호출하여 아래와 같은식으로 이미지 url을 넘겨줍니다.
(사실 이렇게 이미지 url을 사용자한테 보여주는건 보안상 좋지 않습니다. 서버의 폴더 경로가 노출되기 때문에 해커가 맘만먹으면 쉽게 뚫려요. 그래서 db를 연동해서 파라미터로 파일의 기본키를 넘겨서 url을 숨기고 header를 이용하여 image 태그에 url을 사용하는 방법등을 많이 씁니다. 사실 전 잘몰라요는 비밀...)
<script>
function imageView() {
var url = encodeURI('<?=$g4[path]?>/data/file/<?=$bo_table?>/<?=$image?>');
window.open('/imgView.php?u='+url, 'image_view1', 'width=100,height=100,scrollbars=yes,resizable=yes');
}
</script>
2. 두번째는 아래와 같이 imgView.php의 소스입니다.
자바스크립트의 내장 함수인 TimeOut과 재귀함수를 이용하여 이미지의 크기만큼 브라우저의 크기를 늘려주면 되요!
timeout의 100이란 의미는 밀리세컨드로 1/1000초라는뜻인거 아시죠? 100이니까 100/1000초로 0.1초 후에 호출하게 된답니다. 그리고서는 a 태그를 이용하여 self.close는 이미지를 클릭하게 되면 브라우저를 종료하게 되요.
<?
$img = $_GET['u'];
?>
<html>
<head>
<title>Image Viewer</title>
<script language="javascript">
<!--
var default_image = "<?=$img?>";
var now_image = "";
var img;
function loadImage(image) {
if(!image) now_image = default_image;
else now_image = image;
img = document.getElementById("preview");
img.setAttribute("src", now_image);
setTimeout("checkImage()", 100);
}
function checkImage() {
if(img.width > 0) init();
else setTimeout("checkImage()", 100);
}
function init() {
var img = document.getElementById("preview");
var id = document.all;
var w = img.width;
var h = img.height;
w += (id) ? 15 : 40;
h += (id) ? 140 : 170;
if(screen.width < w) {
w = screen.width;
document.body.style.overflowX = '';
} else document.body.style.overflowX = 'hidden';
if(screen.height < h) {
h = screen.height;
if(screen.width > (w+20)) w += 20;
document.body.style.overflowY = '';
} else document.body.style.overflowY = 'hidden';
resizeTo(w,h);
moveTo(((screen.width - w)/2),((screen.height - h)/2));
}
</script>
</head>
<body onload="loadImage();" style="margin:0px 0px 0px 0px;overflowX:hidden;overflowY:hidden;">
<table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><a href="javascript:self.close();void(0);" onFocus="this.blur();"><img id="preview" src="<?=$img?>" border="0"></a></td>
</tr>
</table>
</body>
</html>
제가 준비한 내용은 여기까지에요!
오늘도 즐거운 코딩 하세요^-~
'JAVASCRIPT' 카테고리의 다른 글
| Jquery ajxa 사용법 (0) | 2016.05.18 |
|---|---|
| user strict를 사용하는 이유 (0) | 2015.11.12 |
| jquery 동적 이벤트 추가! (0) | 2015.05.20 |
| jquery empty()와 detach() 비교 (0) | 2015.04.27 |
| jquery timepicker (0) | 2015.04.09 |