У меня большое изображение, которое в основном является фотографией проекта, и под ним у меня есть пять миниатюр.
Я хочу сделать так, чтобы при нажатии на миниатюру большое изображение изменилось в соответствии с эскизом, который был нажат.
Я не уверен, что это называется, поэтому у меня возникли проблемы с его исследованием.
Любая помощь будет большой.
Возможно, что-то подобное даст вам общее представление о том, как его реализовать
<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.
Вот несколько примеров и руководств