작은 이미지를 큰 이미지로 보고 닫기 기능

작은 이미지를 큰 이미지로 보고 닫기 기능

http://jsfiddle.net/a8c9P/

<div id="overlay"></div>

<div id="overlayContent">

    <img id="imgBig" src="" alt="" width="400" />

</div>

<img id="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />

$("#imgSmall").click(function(){                                        $("#imgBig").attr("src","http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif");

    $("#overlay").show();

    $("#overlayContent").show();

});

$("#imgBig").click(function(){

    $("#imgBig").attr("src", "");

    $("#overlay").hide();

    $("#overlayContent").hide();

});

#overlay{

    position: fixed; 

    width: 100%; 

    height: 100%; 

    top: 0px; 

    left: 0px; 

    background-color: #000; 

    opacity: 0.7;

    filter: alpha(opacity = 70) !important;

    display: none;

    z-index: 100;

    

}

#overlayContent{

    position: fixed; 

    width: 100%;

    top: 100px;

    text-align: center;

    display: none;

    overflow: hidden;

    z-index: 100;

}

#contentGallery{

    margin: 0px auto;

}

#imgBig, #imgSmall{

    cursor: pointer;

}