본문 바로가기

Javascript

페이지 별도로 안만들고 이미지 팝업 띄우기 소스

개발을 하다 보니 팝업으로 이미지를 띄울 경우가 있죵..

근데 페이지 만들기 귀찮고, 파라미터 뭘 넘겨야 할지 고민되서

그냥 제가 페이지 안만들고 이미지 팝업 띄울수 있는 소스 만들어 봤습니다.

하지만 아직까지 베타는 커녕 걍 테스트 버전이니 저에게 뭐라고 하지 마세요~

단점은 몇개 있습니다.

1. 새로고침 할 경우 blank페이지로 간다. => 요건 페이지에 스크립트 추가해 넣으면 될거 같은데.. 새로고침 막는 스크립트 있잖아요~ 암튼 고거.
2. IE 7.0 (6.0은 아마도) 에서만 된다. => 뭐 호환성 테스트는 제가 무쟈게 귀차나 해서리~ ㅋㅋ

아래는 소스입니다.


 var OpenWindow;
 function BigImage()
 {
  OpenWindow = window.open("","_BigImage","width=10,height=10,top=0,left=0");
  var ImgObj = "<img id='BigImage' src='" + event.srcElement.src + "' onclick='self.close();'>"
  OpenWindow.document.title = "큰이미지 보기";
  OpenWindow.document.body.style.cursor = "hand";
  OpenWindow.document.body.innerHTML = ImgObj;
  setTimeout("SetPopup()",100);
 }

 function SetPopup()
 {
  var BigImageObjWidth = OpenWindow.document.getElementById("BigImage").width;
  var BigImageObjHeight = OpenWindow.document.getElementById("BigImage").height;

  var PCMaxHeight = screen.availHeight - 100;
  var PCMaxWidth = screen.availWidth - 100;

  if (BigImageObjWidth > PCMaxWidth){
   BigImageObjWidth = PCMaxWidth;
   OpenWindow.document.getElementById("BigImage").width = PCMaxWidth - 30;
  }
  else{
   BigImageObjWidth = eval( BigImageObjWidth + "+" + 30);
  }

  if (BigImageObjHeight > PCMaxHeight){
   BigImageObjHeight = PCMaxHeight;
   OpenWindow.document.getElementById("BigImage").height = PCMaxHeight - 90;
  }
  else{
   BigImageObjHeight = eval( BigImageObjHeight + "+" + 90);
  }

  OpenWindow.resizeTo(BigImageObjWidth, BigImageObjHeight);
  OpenWindow.focus();
  OpenWindow.resizeTo(BigImageObjWidth, BigImageObjHeight);
 }


이 아래는 예제 입니다 ~ 근데 이미지가 넘 작아서리~ ㅋㅋ

사용자 삽입 이미지