제이쿼리 ( JQuery ) 예제

fadeIn( ) 썸네일 클릭 이미지 슬라이드

 

썸네일이미지슬라이드

 

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

댓글

댓글 본문
작성자
비밀번호
버전 관리
gamza
현재 버전
선택 버전
graphittie 자세히 보기