코드펜 : https://codepen.io/gamza/pen/bRxVaa?editors=1100
▣ 구상
- 썸네일 클릭 시, 썸네일과 연결된 메인 이미지가 fadeIn( ) 으로 노출되어야 합니다.
▣ 조건
➊ 썸네일
➋ 메인화면
➌ 페이드인 효과
▣ 준비
· 썸네일 이미지 3장 ( 90px * 80px )
· 메인 이미지 3장 ( 500px * 280px )
◆ 레이아웃 ( html, css )
1. 썸네일 영역 / 메인 영역을 div로 나눕니다.
2. 썸네일 영역(div)을 float : left 시켜 좌로 보냅니다.
3. 메인 영역을 썸네일의 width 만큼 오른쪽으로 옮깁니다.
4. 썸네일 클릭이벤트를 위해, 썸네일 이미지 <img> 를 <a> 로 감쌉니다.
● html
<body>
<div class="thumbs">
<a href="" title="image1"><img src="images/thumb_1.jpg" /></a>
<a href="" title="image2"><img src="images/thumb_2.jpg" /></a>
<a href="" title="image3"><img src="images/thumb_3.jpg" /></a>
</div>
<div id="mainImg"><img src="images/1.jpg" alt="image" /></div>
</body>
● css
body {
margin:100px auto 0;
padding:0;
width:620px;
background-color:salmon;
}
.thumbs {
width:100px;
float:left;
}
.thumbs img {
border:1px solid #ccc;
padding:5px;
margin-bottom:3px;
}
.thumbs img:hover {
border-color:tomato;
}
#mainImg {
border:solid 1px #ccc;
width:500px;
height:280px;
padding:5px;
margin-left:110px;
}
◆ 기능 ( jquery )
1. 썸네일 클릭
2. 해당 썸네일 <a> 태그의 href 속성을
3. 메인 영역 <img> 의 경로인 src 속성으로 전달
4. 메인 영역에 fadeIn() 시켜 노출
썸네일 클릭 시, 클릭된 요소 <a> 태그가 가지고 있는 href 속성에 연결된 이미지를 메인화면에 반영해야 합니다.
그러기 위해선 html 코드에 추가할 부분이 있습니다.
<a> 태그의 href 에, 각 썸네일과 매치된 메인 이미지의 src 주소를 입력합니다.
다음의 방식으로 추가합니다.
<a href="images/1.jpg" title="image1"><img src="images/thumb_1.jpg" /></a>
● javascript
$(function(){
$(".thumbs a").click(function(){ //클릭 시
var imgPath = $(this).attr("href"); //클릭한 a태그의 하이퍼링크를 변수저장
$("#mainImg>img").attr({src:imgPath}) //메인 이미지의 주소 속성에 할당
.hide() //fadein()효과를 보여주기 위해 숨김처리
.fadeIn(); //fadeIn()
return false; //<a> 의 본래기능 (하이퍼링크) 작동방지
});
});
**
본 예제는 이전에 학습하였던 내용에 구현과정을 추가하여 정리한 소스입니다.
실제로 body에 레이아웃 설정을 하는 경우는 거의 없습니다.
body를 대체할 부모요소로 div를 추가 하는 것이 일반적입니다.
