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

차근차근/JAVA Script

예쁜꽃이피었으면 2014. 9. 15. 15:33

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;

}

<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>

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