Html 이미지 클릭시 팝업 확대 - html imiji keulligsi pab-eob hwagdae

Question

답변 2

위토즈 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색님의 답변

2016-10-05 10:28:39 61.♡.♡.35

사랑둥이님의 댓글

↳ 사랑둥이 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-10-05 10:39:28124.♡.♡.3

한번에 해결되었습니다. 감사합니다.

플라이 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색님의 답변

2016-10-05 10:30:32 118.♡.♡.75

자바스크립트로 아래와 같이 연동하셔야 합니다.


<script language="javascript">
function new(){
 window.open("test.asp","new", 
"width=300, height=200, left=30, top=30, 
scrollbars=no,titlebar=no,status=no,resizable=no,fullscreen=no");
}
</script>
<img src="이미지주소" onClick="new()" style="cursor:hand"/>

티스토리 뷰

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

<스크립트>

<script>
function doImgPop(img){
img1= new Image();
img1.src=(img);
imgControll(img);
}
function imgControll(img){
if((img1.width!=0)&&(img1.height!=0)){
viewImage(img);
}
else{
controller="imgControll('"+img+"')";
intervalID=setTimeout(controller,20);
}
}
function viewImage(img){
W=img1.width;
H=img1.height;
O="width="+W+",height="+H+",scrollbars=yes";
imgWin=window.open("","",O);
imgWin.document.write("<html><head><title>확대보기</title></head>");
imgWin.document.write("<body topmargin=0 leftmargin=0>");
imgWin.document.write("<img src="+img+" onclick='self.close()' style='cursor:pointer;' title ='클릭하시면 창이 닫힙니다.'>");
imgWin.document.close();
}
</script>

<html>

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

<css>

.acc01 {width:380px; height:487px; margin:30px 10px 20px; float:left; background:url("../images/acc_bg.png") no-repeat center center; position:relative;}
.acc01 span {position:absolute; z-index:3; top:420px; left:120px; }
.acc_img {width:370px; height:370px; position:absolute; z-index:3; top:0; left:0;}
.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%);}

오늘은 정말 사용하기 편한 기능을 알려드리려고 합니다

사진을 클릭하면 a링크에 사진 링크만 건다면 원본사진의 크기대로 확대창이 뜨고

여러개를 같은 클래스로 연결시키면 슬라이드도 가능한 기능인 lightbox2 사용법입니다.

아래와 같이 클릭시 이미지 팝업창이 뜨는 기능입니다!

- data-title : 사진 아래 주석처럼 첨부할 수 있습니다.

- 무조건 a링크 안에 확대되어 보여질 사진 링크를 넣어주셔야 합니다.

- data-lightbox="example-set" 는 클래스와 같습니다.

1,2,3 을 붙여주면 그룹화도 가능합니다

See the Pen light box 2 사용법 by 박지혜 (@wlgp73) on CodePen.

아래링크로 자세히 확인하실 수 있습니다.

https://codepen.io/wlgp73/pen/jOPegpB

유사 게시물