Qual é o melhor módulo JQuery “Clique em Miniatura e Altere a Imagem Principal”?

StackOverflow https://stackoverflow.com/questions/612575

  •  03-07-2019
  •  | 
  •  

Pergunta

Aqui está o que eu tenho (tudo gerado dinamicamente, se isso faz a diferença):

  • Uma lista de imagens
  • Uma legenda para cada imagem
  • Uma miniatura para cada imagem

A página deve carregar com uma imagem de tamanho completo e todas as miniaturas. Quando um usuário clica em uma miniatura, a imagem em tamanho real mostra essa nova imagem com sua legenda. Se eles clicarem em outra miniatura, a imagem (e a legenda) muda novamente.

Não é muito complexo. Eu invadi uma solução há alguns meses, mas preciso fazê -lo novamente e estou olhando para esse código ruim e pensando que deve haver uma maneira melhor (e conhecer jQuery, alguém já fez isso e fez bem).

Pensamentos? Links?

Obrigado!

Foi útil?

Solução

Aqui está um que parece muito bom e está escrito em jQuery: Slider fotográfico

E aqui está outro que eu gosto um pouco mais:Galleria

Outras dicas

A maioria das respostas aqui é como gravar uma mosca com um cânone !!

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

Isso é tudo que você precisa. 4 linhas de código.

olhe aqui : Galeria em 4 linhas

Você já experimentou o LightBox? http://leandrovieira.com/projects/jquery/lightbox/

Construindo fora de A resposta de Krembo99 ele ligou aqui, Eu queria compartilhar minha solução, pois já havia enviado centenas de fotos quando meu cliente solicitou um recurso como esse. Com isso em mente, adicionando algumas linhas extras ao código fornecido, pude obter uma solução que se encaixasse nos meus parâmetros.

Eu também estava trabalhando com imagens menores também, então não precisava criar versões pequenas e grandes do mesmo arquivo. 

$('.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'));

});

Veja como meu HTML parece.

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

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

Uma página com 9 apresentações de slides de fotos diferentes no jQuery pronto para usar

Confira minha implementação da Galleria: Paisagista de design de jardim na galeria de Essex

Tentar Galleriffic, Tem tudo o que você precisa.

Muitos desses scripts estão desatualizados e não funcionam para mim, além de exigir um conjunto de imagens diferentes para miniaturas. Eu tive uma caçada séria e encontrei algo muito leve que é JS simples, sem necessidade de 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/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top