jcarousel로 썸네일 이미지 슬라이드 만들기 (EN) slider jquery with thumbnail jcarousel

오늘 소개할 제이쿼리는 제이캐러셀입니다. 이 플러그인은 오픈소스로, 자유자재로 응용이 가능한 아주 건강하고 훌륭한 소스입니다. 

사이트 주소를 안내해드리겠습니다. http://sorgalla.com/jcarousel/examples/ 이곳에 가면, 기본적으로 제공해주는 여러개의 example 소스가 있습니다. 

위 예시를 응용해 하단의 이미지와 같은 레이아웃으로 작성해보겠습니다. 

위 이미지는 진행중인 업체의 고유 이미지이므로, 빨간 칸으로 가려두었습니다. 

작은 썸네일을 클릭하면, 큰 이미지로 보여지는 소스입니다. 

			
			

				
			
			
			

				
				

					

						
						

							
								
							
						
						
					
				
				
				
				
				
				

					123
				
			

위와 같이 작성하면 효과가 나는 것을 보실 수 있습니다. 

 

"//첫 로드시" 라고 주석 처리 되어 있는 부분이 처음 로드 되었을때  <img src="" id="big_pic"> 내부의 src에 소스를 넣어주는 부분입니다. 또한 썸네일 클릭을 했을 때,  

큰 이미지에 소스를 던져 주는 것이 

이것에 의해 가능합니다. 

감사합니다. 

postscript > 혹시 사용에 궁금한 점 있으시면 댓글 주시기 바랍니다. ^^