Image Gallery



HTML

															
						


CSS

							#gallery_container{width:100%;padding-top:50px;background:#000;}
							#gallery_navi{width:650px;margin:0 auto;overflow:hidden;}
							#gallery_navi .pageWrap{width:1950px;}
							#gallery_navi .pageWrap .page{width:650px;float:left;}
							#gallery_navi ul{overflow:hidden;height:250px;}
							#gallery_navi ul li{width:145px;float:left;margin:5px;}
							#gallery_navi ul li img{border:3px solid white;}
							#gallery_navi p{width:650px;padding:10px 0;text-align:center;}
							#gallery_navi p img{cursor:pointer;}
							#gallery_panel{text-align:center;position:relative;height:550px;}
							#gallery_panel img{border:3px solid white;border-radius:5px;position:absolute;top:10px;left:70px;}
						


SCRIPT

							$(document).ready(function(){
								$("#gallery_navi a").click(function (e) {
									e.preventDefault();
									$("#gallery_panel img").before("");
									$("#gallery_panel img:last").fadeOut("slow", function  () {
										$(this).remove();
									});
								});

								$("img.next").click(function () {
									$("#gallery_navi .pageWrap").animate({marginLeft: parseInt($("#gallery_navi .pageWrap").css("margin-left"))-650+"px"}, "fast");
								});
								$("img.prev").click(function () {
									$("#gallery_navi .pageWrap").animate({marginLeft: parseInt($("#gallery_navi .pageWrap").css("margin-left"))+650+"px"}, "fast");
								});
							});
						

STEP1. 간단한 Gallery 만들기

							$(document).ready(function() {
								$("#gallery_navi a").click(function(e) {
									e.preventDefault();
									$("#gallery_panel img").attr("src", $(this).attr('href'));
								});
							});	
						

섬네일을 감싸고 있는 a 태그에 대해서 click()으로 click이벤트를 설정합니다. 섬네일이 클릭되면 클릭된 a 태그의 href 속성값을 attr()로 읽어 들여 메인 그림(#gallery_panel img)의 src 속성값을 변경합니다. 섬네일 클릭시 큰 이미지로 변경되는 간단한 갤러리 완성!
a 태그에 click 이벤트를 설정할 경우 a 태그의 링크를 무효화하는 방법을 적용해야 link를 타고 페이지로 이동하는 것을 막을 수 있습니다. 상단의 소스처럼 e이벤트 객체를 콜백함수의 인자로 넘겨 e.preventDefault()를 설정하거나 소스의 맨 하단에 return false;를 설정합니다.


STEP2. 애니메이션 효과로 그림을 매끄럽게 변경하기

							$(document).ready(function(){
								$("#gallery_navi a").click(function (e) {
									e.preventDefault();
									$("#gallery_panel img").before("");
									$("#gallery_panel img:last").fadeOut("slow", function  () {
										$(this).remove();
									});
								});
							});							
						
							#gallery_panel img{
								border:3px solid white;
								border-radius:5px;
								position:absolute; /* position:absolute를 넣는 것이 핵심 */
								top:10px;
								left:70px;
							}				
						

섬네일이 클릭되면 before()를 사용하여 메인 그림(#gallery_panel img)의 앞에 새로운 img 태그를 삽입합니다. 삽입한 img 태그의 src 속성에는 클릭된 a 태그의 href 속성에서 읽어 들인 값(클릭된 섬네일에 대응하는 메인 그림)을 설정합니다.
#gallery_panel 안의 img 태그는 css에서 position:absolute를 설정하고 있으므로 원래 표시되었던 메인 그림과 다음에 스크립트를 사용해서 추가될 화면은 겹쳐지는 상태가 될 것 입니다.

before()메서드를 이용해서 원래 이미지보다 앞에 이미지를 삽입하게 되는데, 이렇게 함으로써 레이어층을 이루는 2개의 이미지 중에 기존의 이미지가 fadeOut되면서 새로 추가된 이미지가 서서히 나타나는 듯한 효과를 줄 수 있습니다.
(after()를 이용해 뒤에 넣고 FadeIn효과를 주면서 효과가 끝났을 때, 콜백함수에서 기존의 이미지를 remove()시킨다면 똑같은 효과를 볼 수 있을 것으로 추측됨. 실제로는 그렇게 되지 않음.)

다음은 fadeOut()을 사용해서 원래의 메인 그림을 조금씨 비표시 상태로 만들어 갑니다. 그러면 앞쪽의 이미지가 서서히 비표시 상태가 되면서 안쪽에 있는 새로운 그림이 보이게 될 것입니다. #gallery_panel 안에는 원래의 메인 그림과 스크립트로 추가한 그림밖에 존재하지 않으므로 셀렉터로 #gallery_panel img:last로 지정하면 원래의 메인 그림을 선택할 수 있습니다.

페이드 아웃이 완료되어도 원래의 img 태그는 display 속성이 none이 되어 볼 수 없게 되었을 뿐 HTML 태그로 존재하고 있으므로 섬네일 클릭을 반복하면 img 태그가 점점 늘어나게 됩니다. 이 때 콜백 함수 안에 remove()를 사용하면, 페이드아웃 효과가 끝나면 원래의 이미지를 완전히 삭제할 수 있습니다.

STEP3. 그림이 추가되는 슬라이드식 갤러리로 개선(현재 상태)

그림을 추가할 경우 섬네일을 표시할 장소가 부족합니다. 더 많은 그림을 보여주기 위해 섬네일 부분을 복수의 패널로 준비하여 내비게이션 버튼을 이용하여 각 패널을 옆으로 슬라이딩하며 변경하도록 개선해 봅시다.

															
						

상기의 HTML은 개선하기 전의 단순한 이미지 갤러리 소스입니다.

다음은 스크립트 부분입니다. 내비게이션 버튼에 클릭 이벤트를 설정하고 "다음", "앞으로" 버튼이 클릭되었을 때 div.pageWrap의 margin-left 속성을 변경함으로써 슬라이딩 효과를 연출합니다. "다음" 버튼이 클릭되면 animate() 명령을 사용해서 div.pageWrap의 margin-left 속성을 현재 값에서 650픽셀을 뺀 값으로 서서히 변경됩니다. "앞으로" 버튼이 클릭되면 반대로 650픽셀을 더한 값으로 변경합니다. 이것으로 패널 부분이 좌우로 슬라이딩 되는 이미지 갤러리가 완성되었습니다.



** 참고: 문자열을 수식으로 바꿔주는 parseInt()

상단 샘플에서 animate()를 설정할 때 parseInt()라는 새로운 JavaScript 함수를 사용하였습니다. parseInt()는 문자열을 수식으로 변경하는 명령입니다.

예를 들어 margin-left 속성에 300픽셀을 더하는 식으로 설정하고 싶을 경우에 아래와 같이 기술하면 의도한 결과를 얻을 수 없습니다.

							$("#navi .pageWrap").css("margin-left")+300+"px"
						

$("#navi .pageWrap").css("margin-left")는 현재의 margin-left 속성값을 가져오고 있습니다. margin-left 속성값이 "300px"이라면 "600px"이라는 결과를 얻고자 하는 것이겠지만, 실제로는 "300px300px"라는 텍스트가 되어 버립니다. margin-left의 "300px"과 수식의 "300", 문자열의 "px"이 합쳐졌기 때문에 문자열로 인식하기 때문입니다.

이제 parseInt()를 사용해서 문자열을 수식으로 변경합니다. 아래와 같이 변경하면 이번에는 "300+300+px"로 인식됩니다. 처음의 +(플러스)는 수식과 수식간에 있는 연산자의 +이므로 더하기 연산이 수행되어 "600"이 되고, 다음 +에서는 문자열의 "px"와 결합되어 "600px"을 설정할 수 있게 됩니다.

							parseInt($("#navi .pageWrap").css("margin-left"))+300+"px"