코드펜 : 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
1 2 3 4 5 6 7 8 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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 주소를 입력합니다.
다음의 방식으로 추가합니다.
1 | <a href="images/1.jpg" title="image1"><img src="images/thumb_1.jpg" /></a> |
● javascript
1 2 3 4 5 6 7 8 9 | $(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를 추가 하는 것이 일반적입니다.
