[jQuery]작은 이미지(썸네일)들 클릭하면 특정 공간에 큰 이미지 노출

프로그래밍/JavaScript

[jQuery]작은 이미지(썸네일)들 클릭하면 특정 공간에 큰 이미지 노출

도깨비방망이 2014. 8. 7. 13:14

작은 이미지들 클릭하면 특정 공간에 큰 이미지 노출

1. 환경

- 쇼핑몰 사이트의 상품소개등에 사용

- 여러 썸네일 이미지를 클릭 => 큰 이미지 변경

- 큰 이미지 클릭 => 새창으로 이미지 보여줌

2. 소스

- jQuery

jQuery(document).ready(function () {
		var imgPath = '';
		
		jQuery('#big_pic').click(function () {
			imgPath = jQuery("#big_pic").attr("src");
			window.open(imgPath, "_blank");
		});
		jQuery('#small_pic1').click(function () {
			imgPath = jQuery("#small_pic1").attr("src");
			if ( imgPath != "http://domain/image/photo_noimg.gif")
			{
				jQuery('#big_pic').attr("src",imgPath);
			}
		});
		jQuery('#small_pic2').click(function () {
			imgPath = jQuery("#small_pic2").attr("src");
			if ( imgPath != "http://domain/image/photo_noimg.gif")
			{
				jQuery('#big_pic').attr("src",imgPath);
			}
		});
		jQuery('#small_pic3').click(function () {
			imgPath = jQuery("#small_pic3").attr("src");
			if ( imgPath != "http://domain/image/photo_noimg.gif")
			{
				jQuery('#big_pic').attr("src",imgPath);
			}
		});
		jQuery('#small_pic4').click(function () {
			imgPath = jQuery("#small_pic4").attr("src");
			if ( imgPath != "http://domain/image/photo_noimg.gif")
			{
				jQuery('#big_pic').attr("src",imgPath);
			}
		});
	});

//-->
</script>

- html or aspx

<table border="0" cellspacing="0" cellpadding="0">
		
	<tr>                                            
		<td style="background:#f6f6f6;">
       
				<div style="background:#FFF; width:892px; height:190px; padding:20px 0 20px 20px;">
					
					<div class="bbs_view02"> 
						<div style="border:0px solid blue; height:150px; padding:3 3 0 3;">
							<%
							  if ( attach_file1 !=  "" )
								imgName="http://domain/image/" + attach_file1;
							  else if ( attach_file2 !=  "" )
								imgName="http://domain/image/" + attach_file2;
							  else if ( attach_file3 !=  "" )
								imgName="http://domain/image/" + attach_file3;
							  else if ( attach_file4 !=  "" )
								imgName="http://domain/image/" + attach_file4;
							  else
								imgName="http://domain/image/photo_noimg01.gif";
							 %>
							<img src="<%=imgName%>" style="max-width:270px;max-height:145px;cursor:pointer;align:top;" width="270" height="145" id="big_pic">
						</div>
						
						<div style="border:0px solid #000;height:40px;padding:3 3 0 3;">
							
							 <%
							  if ( attach_file1 !=  "" ) imgName="http://domain/image/" + attach_file1;
							  else imgName="http://domain/image/photo_noimg.gif";
							 %> 
							<img src="<%=imgName%>" style="max-width:65px;max-height:47px;cursor:pointer;" width="65" height="47" id="small_pic1"   >
							
							<%
							  if ( attach_file2 !=  "" ) imgName="http://domain/image/" + attach_file2;
							  else imgName="http://domain/image/photo_noimg.gif";
							 %> 
							<img src="<%=imgName%>" style="max-width:65px;max-height:47px;cursor:pointer;" width="65" height="47" id="small_pic2"  >
							
							<%
							  if ( attach_file3 !=  "" ) imgName="http://domain/image/" + attach_file3;
							  else imgName="http://domain/image/photo_noimg.gif";
							 %> 
							<img src="<%=imgName%>"  style="max-width:65px;max-height:47px;cursor:pointer;" width="65" height="47" id="small_pic3"  >
							
							<%
							  if ( attach_file4 !=  "" ) imgName="http://domain/image/" + attach_file4;
							  else imgName="http://domain/image/photo_noimg.gif";
							 %> 
							<img src="<%=imgName%>"  style="max-width:65px;max-height:47px;cursor:pointer;" width="65" height="47" id="small_pic4"  >
							
						</div>                      
					</div>              
		</td>
	</tr>
</table>

저작자표시 비영리 변경금지