섬네일 이미지 클릭시 큰 이미지로 보여주기

http://www.dweb.co.kr/bbs/board.php?bo_table=javascript&wr_id=6&page=

html

<ul class = "thumbImg">

<li><img src="/img/Image01.jpg" onclick="doShow(this.src)"/></li>

<li><img src="/img/Image02.jpg" onclick="doShow(this.src)"/></li>

<li><img src="/img/Image03.jpg" onclick="doShow(this.src)"/></li>

<li><img src="/img/Image04.jpg" onclick="doShow(this.src)"/></li>

</ul>

<div class="bigImgBox">

<img src="/img/Image01/jsp" id="bigImg">

</div>

자바스크립트

<script>

funcion doShow(imgSrc){

document.getElementById("bigImg").src = imgSrc;

}

</script>

---

나의 경우

function doShow(imgSrc){

document.getElementById("bigimage").src = imgSrc;

}

<!--content-->

<div id="content">

  <div id="item_images">

<div id = "imgcenter">

        <div><img id="bigimage" src="${plant.bimg_file_name}" width="320px" height="225px"></div>

</div>

         

<div id="thum_image">

 <div id = "imgcenter">

<c:forEach items="${plantimage}" var="plantimage">

<a href="#"><img src="${plantimage.file_name}" width="64px" height="91px" onclick="doShow(this.src)"></a>  

</c:forEach>

</div>

         </div>

    

---

http://rocabilly.tistory.com/?page=2     

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

1. 환경

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

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

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

2. 소스

- jQuery

view plaincopy to clipboardprint?

1. <script language="javascript" type="text/javascript">  
2. <!--  
3.     jQuery.noConflict();  
4.   
5.     jQuery(document).ready(function () {  
6.         var imgPath = '';  
7.           
8.         jQuery('#big_pic').click(function () {  
9.             imgPath = jQuery("#big_pic").attr("src");  
10.             window.open(imgPath, "_blank");  
11.         });  
12.         jQuery('#small_pic1').click(function () {  
13.             imgPath = jQuery("#small_pic1").attr("src");  
14.             if ( imgPath != "http://domain/image/photo_noimg.gif")  
15.             {  
16.                 jQuery('#big_pic').attr("src",imgPath);  
17.             }  
18.         });  
19.         jQuery('#small_pic2').click(function () {  
20.             imgPath = jQuery("#small_pic2").attr("src");  
21.             if ( imgPath != "http://domain/image/photo_noimg.gif")  
22.             {  
23.                 jQuery('#big_pic').attr("src",imgPath);  
24.             }  
25.         });  
26.         jQuery('#small_pic3').click(function () {  
27.             imgPath = jQuery("#small_pic3").attr("src");  
28.             if ( imgPath != "http://domain/image/photo_noimg.gif")  
29.             {  
30.                 jQuery('#big_pic').attr("src",imgPath);  
31.             }  
32.         });  
33.         jQuery('#small_pic4').click(function () {  
34.             imgPath = jQuery("#small_pic4").attr("src");  
35.             if ( imgPath != "http://domain/image/photo_noimg.gif")  
36.             {  
37.                 jQuery('#big_pic').attr("src",imgPath);  
38.             }  
39.         });  
40.     });  
41.   
42.   
43. //-->  
44. </script>  

- html or aspx

view plaincopy to clipboardprint?

1. <table border="0" cellspacing="0" cellpadding="0">  
2.           
3.     <tr>                                              
4.         <td style="background:#f6f6f6;">  
5.          
6.                 <div style="background:#FFF; width:892px; height:190px; padding:20px 0 20px 20px;">  
7.                     <!--포토사진보기-->  
8.                     <div class="bbs_view02">   
9.                         <div style="border:0px solid blue; height:150px; padding:3 3 0 3;"><!--큰사진 -->  
10.                             <%  
11.                               if ( attach_file1 !=  "" )  
12.                                 imgName="http://domain/image/" + attach_file1;  
13.                               else if ( attach_file2 !=  "" )  
14.                                 imgName="http://domain/image/" + attach_file2;  
15.                               else if ( attach_file3 !=  "" )  
16.                                 imgName="http://domain/image/" + attach_file3;  
17.                               else if ( attach_file4 !=  "" )  
18.                                 imgName="http://domain/image/" + attach_file4;  
19.                               else  
20.                                 imgName="http://domain/image/photo_noimg01.gif";  
21.                              %>  
22.                             <img src="<%=imgName%>" style="max-width:270px;max-height:145px;cursor:pointer;align:top;" width="270" height="145" id="big_pic">  
23.                         </div>  
24.                         <!--작은사진 -->  
25.                         <div style="border:0px solid #000;height:40px;padding:3 3 0 3;">  
26.                               
27.                              <%  
28.                               if ( attach_file1 !=  "" ) imgName="http://domain/image/" + attach_file1;  
29.                               else imgName="http://domain/image/photo_noimg.gif";  
30.                              %>   
31.                             <img src="<%=imgName%>" style="max-width:65px;max-height:47px;cursor:pointer;" width="65" height="47" id="small_pic1"   >  
32.                               
33.                             <%  
34.                               if ( attach_file2 !=  "" ) imgName="http://domain/image/" + attach_file2;  
35.                               else imgName="http://domain/image/photo_noimg.gif";  
36.                              %>   
37.                             <img src="<%=imgName%>" style="max-width:65px;max-height:47px;cursor:pointer;" width="65" height="47" id="small_pic2"  >  
38.                               
39.                             <%  
40.                               if ( attach_file3 !=  "" ) imgName="http://domain/image/" + attach_file3;  
41.                               else imgName="http://domain/image/photo_noimg.gif";  
42.                              %>   
43.                             <img src="<%=imgName%>"  style="max-width:65px;max-height:47px;cursor:pointer;" width="65" height="47" id="small_pic3"  >  
44.                               
45.                             <%  
46.                               if ( attach_file4 !=  "" ) imgName="http://domain/image/" + attach_file4;  
47.                               else imgName="http://domain/image/photo_noimg.gif";  
48.                              %>   
49.                             <img src="<%=imgName%>"  style="max-width:65px;max-height:47px;cursor:pointer;" width="65" height="47" id="small_pic4"  >  
50.                               
51.                         </div>                        
52.                     </div><!--bbs_view02---->                
53.         </td>  
54.     </tr>  
55. </table>