Простая смена изображения

Возможно, что-то подобное даст вам общее представление о том, как его реализовать

<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>

Теперь вам нужно сохранить миниатюры в этом формате: "путь/в/полный /img -thumbnail.jpg", поэтому вы добавляете "-thumbnail" для небольших версий, а в скрипте вы удаляете эту часть, чтобы получить полный размер и место img и замените текущий img в div mainViewport.

Вот рабочий пример: http://jsfiddle.net/wbT4N/1/

Имейте в виду, что у меня нет миниатюрной версии и полноверсии этих фотографий, я просто разместил какую-то фиктивную.jpg, вы должны иметь и то, и другое, как я объяснил.

Удачи

Он назывался галереей изображений/слайдером. Для его реализации обычно требуется javascript/jQuery.

Вот несколько примеров и руководств