티스토리 뷰

웹디자인

이미지 클릭시 큰 이미지 팝업 뜨면서 보이도록 하는 소스

깽아네 2018. 12. 12. 15:55
728x90

 

안녕하세요. 오늘은 이미지 클릭시 이미지가 크게 팝업으로 뜨는 소스에 대해서 알려드리려고 해요.

 

<스크립트>

  1. <script>
  2. function doImgPop(img){
  3.  img1= new Image();
  4.  img1.src=(img);
  5.  imgControll(img);
  6. }
  7. function imgControll(img){
  8.  if((img1.width!=0)&&(img1.height!=0)){
  9.     viewImage(img);
  10.   }
  11.   else{
  12.      controller="imgControll('"+img+"')";
  13.      intervalID=setTimeout(controller,20);
  14.   }
  15. }
  16. function viewImage(img){
  17.  W=img1.width;
  18.  H=img1.height;
  19.  O="width="+W+",height="+H+",scrollbars=yes";
  20.  imgWin=window.open("","",O);
  21.  imgWin.document.write("<html><head><title>확대보기</title></head>");
  22.  imgWin.document.write("<body topmargin=0 leftmargin=0>");
  23.  imgWin.document.write("<img src="+img+" onclick='self.close()' style='cursor:pointer;' title ='클릭하시면 창이 닫힙니다.'>");
  24.  imgWin.document.close();
  25. }
  26. </script>

 

 

 

<html>

  1. <div class="acc01">
  2.   <div class="acc_img"><img src="이미지경로" alt="이미지경로"></div>
  3.      <div class="acc_tt">이미지경로</div>
  4.      <span><img src="버튼이미지경로" alt="확대보기" style="cursor: pointer;" alt="" onclick="doImgPop('/images/multy_clip.jpg')"></span>
  5.  </div>

 

 

 

<css>

  1. .acc01 {width:380px; height:487px; margin:30px 10px 20px; float:left; background:url("../images/acc_bg.png") no-repeat center center; position:relative;}
  2. .acc01 span {position:absolute; z-index:3; top:420px; left:120px; }
  3. .acc_img {width:370px; height:370px; position:absolute; z-index:3; top:0; left:0;}
  4. .acc_tt {color:#070000; font-size:20px; font-weight:bold; text-align:center; position:absolute; z-index:3; top:385px; left:50%; transform:translateX(-50%);}

 

 

 

 

728x90
저작자표시 비영리 동일조건

'웹디자인' 카테고리의 다른 글

jquery 클릭시 메뉴를 접었다 펼치는 소스  (0) 2018.12.21
이미지 클릭시 오버시 다른 이미지로 변경하는 소스  (0) 2018.12.21
슬라이드 자동이동 및 화살표 클릭시 옆으로 이동  (0) 2018.12.11
탭 클릭시 페이지 안에서 스크롤 이동되는 소스  (0) 2018.12.07
텝 클릭시 하단 이미지 변경되는 css  (0) 2018.12.06