簡單的圖像變化

Question

我有一個大的圖像基本上是一個項目的封面照片和它下面我有五個縮略圖。

我想讓它變成這樣，當你點擊一個縮略圖時，大圖將會改變，以與點擊的縮略圖相對應。

我不確定這是叫什麼，所以我一直有麻煩研究它。

任何幫助將是偉大的。

Answer 1

它被稱爲圖庫/滑塊。你通常需要javascript/jQuery來實現它。

這裏有一些examples and tutorials

Answer 2

也許這樣的事情會給你如何實現它

<div class="gallery"> 

    <div id="mainViewport" class="viewport"> 
     <img src="my-picture.jpg" alt=""/> 
    </div> 

    <ul class="thumbnails"> 
     <li><img src="imgs/my-picture-thumbnail.jpg" alt=""/></li> 
     <li><img src="imgs/my-picture2-thumbnail.jpg" alt=""/></li> 
     <li><img src="imgs/my-picture3-thumbnail.jpg" alt=""/></li> 
    </ul> 
</div> 


<script> 
    var mainViewport = $('#mainViewport'); 
    $('.thumbnails img').click(function(){ 
     var path = $(this).attr('src').replace('-thumbnail',''); 
     var mainImg = new Image(); 
     mainImg.src = path; 
     mainViewport.html(mainImg); 

    }); 
</script> 

現在，你需要你的縮略圖存儲在該格式的總體思路，「路徑/到/ full/img-thumbnail.jpg'，因此您將爲較小的版本添加'-thumbnail'，並在腳本中刪除該部分以獲取完整大小的img路徑，並將當前img替換爲mainViewport div。

這裏是一個工作示例： http://jsfiddle.net/wbT4N/1/

請注意，我沒有縮略圖版本和圖片的fullversion，我剛放置一些虛擬.JPG，你應該有兩個，並命名正如我所解釋的。

祝你好運