简单的图像变化

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，你应该有两个，并命名正如我所解释的。

祝你好运