Какой лучший jQuery щелкнуть миниатюру и изменить модуль основного изображения?

Вот что у меня есть (все генерируется динамически, если это имеет значение):

  • Список изображений
  • Подпись к каждому изображению
  • Миниатюра для каждого изображения

Страница должна загрузиться с одним полноразмерным изображением и всеми миниатюрами. Когда пользователь щелкает миниатюру, полноразмерное изображение показывает это новое изображение с подписью. Если они щелкнут другую миниатюру, изображение (и подпись) снова изменятся.

Это не очень сложно. Я придумал решение несколько месяцев назад, но мне нужно сделать это снова, и я смотрю на этот дрянной код и думаю, что должен быть лучший способ (и, зная jQuery, кто-то уже сделал это, и сделал это хорошо).

Мысли? Ссылки?

Спасибо!


jquery gallery thumbnails
person Eileen    schedule 04.03.2009    source источник
comment
Делаем аналогично с небольшим изменением. Миниатюра MouseOver изменяет основное изображение, но не прикрепляется. Щелкните большим пальцем, чтобы сделать основное изображение закрепленным. Пользователь может навести указатель мыши на Thumbs для просмотра, а затем щелкнуть нужный; если мышь проходит по большему количеству больших пальцев, основное изображение вернется, когда мышь-ВНЕ всех больших пальцев   -  person Kristen    schedule 05.03.2009

Ответы (8)


arrow_upward
2
arrow_downward

Вот один из них, который выглядит очень красиво и написан на jQuery: Photo Slider

А вот еще один, который мне нравится больше: Галерея

person OverloadUT    schedule 04.03.2009
comment
Ооо, Галерея красивая и именно то, что я искал! Спасибо! - person Eileen; 05.03.2009

arrow_upward
48
arrow_downward

Большинство ответов здесь похожи на стрельбу из канона по мухе!!

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

это все, что вам нужно... 4 строки кода.

посмотрите здесь: gallery-in-4-lines

person krembo99    schedule 02.11.2011
comment
с тобой. все остальное кажется излишеством - person Aaron Ortega; 14.06.2012
comment
Я ОЧЕНЬ хочу, чтобы все «ответы» были такими хорошими - какой идеальный ответ и ОТЛИЧНОЕ место для начала ... добавьте больше, если вам нужно, но это сводит все к минимуму. - Спасибо - person j-p; 25.03.2013

arrow_upward
3
arrow_downward

Вы пробовали Лайтбокс? http://leandrovieira.com/projects/jquery/lightbox/

person Donnie Thomas    schedule 28.03.2009

arrow_upward
2
arrow_downward

Основываясь на ответе 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>
person M. Cotter    schedule 19.10.2016

arrow_upward
1
arrow_downward

http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/

Страница с 9 различными слайд-шоу фотографий в jQuery, готовая к использованию

person Xunil    schedule 04.03.2009

arrow_upward
1
arrow_downward

Посмотрите мою реализацию в галерее: Дизайн сада Ландшафтный дизайнер в галерее Эссекс

person Kenco Gold    schedule 04.03.2010

arrow_upward
0
arrow_downward

Попробуйте Galleriffic, там есть все, что вам нужно.

person bas    schedule 12.11.2010

arrow_upward
0
arrow_downward

Многие из этих скриптов устарели и не работают для меня, плюс требуют набор различных изображений для эскизов. У меня была серьезная охота, и я нашел что-то очень легкое, простое js, без jquery.

<html>
<head>
<style>
* {margin:0; padding:0; border:0; outline:0; box-sizing:border-box;}
.image, .thumb {width:100%; height:100%;}
#product-image-wrap {position:relative; float:left; width:250px; height:325px; margin:50px 0 50px 50px;}
#product-image {position:relative; float:left; width:250px; height:250px; border:1px solid #d0d0d0; padding:20px; cursor:pointer; display:inline-block; transition:0.9s;}
#product-image:hover {opacity:0.7;}
.product-image-thumbnail {position:relative; float:left; width:55px; height:55px; border:1px solid #d0d0d0; margin-top:20px; padding:10px; cursor:pointer; display:inline-block; transition:0.9s;}
.product-image-thumbnail:hover {opacity:0.7;}
.product-image-thumbnail-spacer {position:relative; float:left; width:10px; height:130px;}
</style>

</head>
<body>

<div id='product-image-wrap'>

<!-- Main -->
<div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>

<!-- Thumbs -->
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='preview(this)' alt='image 0'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='preview(this)' alt='image 2'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='preview(this)' alt='image 3'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='preview(this)' alt='image 4'></div>

</div>

<!-- Javascript -->
<script>
var lastImg = 1;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id;
}
</script>

</body>
</html>

https://jsfiddle.net/uo6js5v7/

person SJacks    schedule 30.11.2018