자바 스크립트 이미지 클릭 팝업 - jaba seukeulibteu imiji keullig pab-eob

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"태그를 이용해서 클릭시 새창으로 원본이미지를 보여주는 소스

<body>

<br>

</body>

var img = document.getElementsByTagName("img");

for (var x = 0; x < img.length; x++) {

img.item(x).onclick=function() {window.open(this.src)};

}

</script>

Colored by Color Scripter

게시글 관리

구독하기38LARAVEL

저작자표시

'JavaScript' 카테고리의 다른 글

버튼 이벤트설정하기 (0)2019.07.21id선택 후 글씨 변경하기 (0)2019.07.21이미지를 클릭하면 경고창이 발생하는 이벤트를 작성해보자 (0)2019.07.11⭑버튼을 form밖으로 빼기 (0)2019.05.30배열만들고 데이터넣고 꺼내기 (0)2019.05.25

반응형

//viewImage.jsp ( 이미지 실제 사이즈를 보여주는 곳

<HTML>
<HEAD>
<TITLE>Fit the Pic Script</TITLE>
<script language='javascript'>
   var arrTemp=self.location.href.split("?");
   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var NS = (navigator.appName=="Netscape")?true:false;
     function FitPic() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight;
       window.resizeBy(iWidth, iHeight);
       self.focus();
     };
</script>
</HEAD>
<BODY bgcolor="#000000" onload='FitPic();' topmargin="0"
marginheight="0" leftmargin="0" marginwidth="0" scroll="auto">