Основываясь на ответе krembo99, который он связал здесь , я хотел поделиться своим решением, так как я уже загрузил сотни фотографий, когда мой клиент запросил такую функцию. Имея это в виду, добавив несколько дополнительных строк в предоставленный код, я смог получить решение, которое соответствует моим параметрам.
Я также работал с небольшими изображениями, поэтому мне не нужно было создавать маленькие и большие версии одного и того же файла.
$('.thumbnails img').click(function(){
// Grab img.thumb class src attribute
// NOTE: ALL img tags must have use this class,
// otherwise you can't click back to the first image.
var thumbSrc = $('.thumb').attr('src');
// Grab img#largeImage src attribute
var largeSrc = $('#largeImage').attr('src');
// Use variables to replace src instead of relying on file names.
$('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
$('#description').html($(this).attr('alt'));
});
Вот как выглядит мой HTML.
<img src="path/to/file1.jpg" id="largeImage" class="thumb">
<div id="description">1st image Description</div>
<div class="thumbnails">
<img src="path/to/file1.jpg" class="thumb" alt="1st image description">
<img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
<img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
<img src="path/to/file4.jpg" class="thumb" alt="4th image description">
<img src="path/to/file5.jpg" class="thumb" alt="5th image description">
</div>