Javascript放大縮略圖

我正在做一個網站的過程中，並希望有一個部分，其中有三個圖片和一個段落。其中兩張照片很小，另一張很大。我想這樣做，當你點擊一張較小的照片時，它會拍攝更大的照片，而更大的照片會縮小並拍攝縮略圖。任何想法我會如何去做這件事？謝謝！Javascript放大縮略圖

<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%; 
}

來源

2013-07-14 nictoriousface

您是否嘗試過除HTML位以外的任何內容？你能分享更多的代碼嗎？ – putvande

當然！只是增加了一些代碼 – nictoriousface

是另一個jQuery答：P

$(document).ready(function(){ 
    $('img').click(function(){ 
     // get the url of the picture we clicked 
     var url = $(this).attr('src'); 
     // get the url of the large image 
     var bigUrl = $('.large-picture > img').attr('src'); 
     // change the url of the big picture 
     $('.large-picture > img').attr('src', url); 
     // change the url of this picture 
     $(this).attr('src', bigUrl); 
    }); 
});

http://jsfiddle.net/brbcoding/VEy5j/

來源

2013-07-14 16:12:56 brbcoding

傑出！非常感謝你的幫助 – nictoriousface

@nobodyiousface喜歡它，並接受它，如果你喜歡答案......它真的沒有什麼不同於它的答案它 –

是的，它是非常相同的。我剛剛完成了我的一分鐘後，並認爲我會發布它:) – brbcoding

$('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/

來源

2013-07-14 16:08:35

因爲我愛jquery！ –

是的，有更好的辦法做到這一點，但我沒有得到這個... –

Javascript放大縮略圖

回答

相關問題