썸네일 클릭 - fadeIn( ) - 제이쿼리 ( JQuery ) 예제

썸네일이미지슬라이드

코드펜 : 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를 추가 하는 것이 일반적입니다.

썸네일 클릭 - fadeIn( )

댓글