Javascript 放大缩略图

Question

我正在制作一个站点，希望有一个包含三张图片和一个段落的部分。图片有两张小，一张大。我想要它，所以当您单击其中一张较小的图片时，它会占据较大图片的位置，而较大的图片会缩小并占据缩略图的位置。知道我会怎么做吗？谢谢!

<div class='picture-container' id='pc1'>
    <div class='large-picture' id='lp1'>
        <img src='make-up_artist_dupontstudios.png' width='45%' height='100%' class='no-mobile' style='float:left;' />
        <div class='picture-content' style='float:right;'>
            <div class='picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
            <div class='picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
            <div class='small-picture' style='float:left;'>
                <img src='hair_and_makeup_dupontstudios.png' width='175' height='100' />
            </div>
            <div class='small-picture'>
                <img src='infinity_wall_dupontstudios.png' width='175' height='100' />
            </div>
        </div>
    </div>
</div>

更新:这是一些 CSS

.picture-container{
    height:300px;
    width:99%;
    margin-left:auto;
    margin-right:auto;
}

.picture-content{
    width: 100%;
    margin: 0 auto;
    text-align:center;
    font-size:75%;
}

.picture-text{
    font-size:65%;
    padding-top:25px;
}

.picture-title{
   color:#FE2E2E;
   font-size:85%;
}

.small-picture{
    float:left;
    padding-right:25px;
    padding-top:25px;
    display:none;
}

#text-container{
    margin: 0 auto;
    width:90%;
} 

Answer 1

$('img').click(
function(e){
  var current_img_src $('e.currentTarget').attr('src');
  var current_img $('e.currentTarget').parent();
  var large_img_src $('.large-picture img').attr('src');

  current_img.attr('src',large_img_src);
  $('.large-picture img').attr('src',current_img_src);
});

这是我自己的例子 http://jsfiddle.net/DcRTh/