썸네일에서 여는 이미지에 닫기 버튼을 추가하는 방법

Question

나는 썸네일 이미지 목록을 전체 크기 이미지에 링크 된 괄호 안에 넣습니다. 전체 크기 이미지에 닫기 버튼을 추가하고 싶습니다. 나는 iframe을 사용하려고 생각하고 있었다. 그 일을하는 또 다른 방법은 그럴 수 있습니까?

고맙습니다.

HTML

<div class="finishing-touches-contempovertical"> 
    <a id="thumb" class="thumb1" href="images/image.jpg"> 
     <img src="images/image-thumbnail.jpg"/> 
    </a> 
</div> 

CSS

a.thumb1 { 
    position: relative; 
    float: none; 
    margin: 20px 10px 10px 660px; 
    display: block; 
    width: 75px; 
} 

바이올린 :

http://jsfiddle.net/zPQ7U/

Answer 1

사용 팝업 및 JQuery와

<style> 
#popup{ 
display: none; 
position: fixed; 
z-index: 1000; 
/* your styles */ 
} 
</style> 

<div class="finishing-touches-contempovertical"> 
    <a id="thumb" class="thumb1" href="images/image.jpg"> 
    <img src="images/image-thumbnail.jpg"/> 
    </a> 
</div> 

<div id="popup"> 
    <img src="" /> 
    <div class="close_popup">X</div> 
</div> 

<script> 
$('a.thumb1').on('click',function(){ // when press link 

    var fullImg = $(this).attr('href') // get full size img url 
    $('#popup img').attr('src', fullImg) // image in popup now has source that you need 
    $('#popup').show() // popup appears 
    return false // do not redirect 

}) 

$('.close_popup').on('click', function(){ 

    $('#popup').hide() // close popup 

}) 
</script> 

http://jsfiddle.net/ha5fH/1/