¿Cuál es la mejor jQuery & # 8220; haga clic en una miniatura y cambie la imagen principal & # 8221; ¿módulo?

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

  •  03-07-2019
  •  | 
  •  

Pregunta

Esto es lo que tengo (todo generado de forma dinámica, si eso marca una diferencia):

  • Una lista de imágenes
  • Un título para cada imagen
  • Una miniatura para cada imagen

La página debe cargarse con una imagen de tamaño completo y todas las miniaturas. Cuando un usuario hace clic en una miniatura, la imagen de tamaño completo muestra esa nueva imagen con su título. Si hacen clic en otra miniatura, la imagen (y el título) cambian nuevamente.

No es muy complejo. Hackeé una solución hace unos meses, pero necesito hacerlo de nuevo y estoy viendo este código de mierda y pensando que tiene que haber una mejor manera (y sabiendo jQuery, alguien más ya lo ha hecho y hecho Es mejor).

¿Pensamientos? Enlaces?

¡Gracias!

¿Fue útil?

Solución

Aquí hay uno que se ve muy bien y está escrito en jQuery: Control deslizante de fotos

Y aquí hay otro que me gusta un poco mejor: Galleria

Otros consejos

¡La mayoría de las respuestas aquí son como disparar una mosca con un canon! 

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

esto es todo lo que necesitas ... 4 líneas de código.

vea aquí: gallery-in-4-lines

A partir de la la respuesta de krembo99 que vinculó aquí , quería compartir mi solución, ya que ya había subido cientos de fotos cuando mi cliente había solicitado una función como esta. Teniendo esto en cuenta, al agregar algunas líneas adicionales al código provisto, pude obtener una solución que se ajusta a mis parámetros.

También estaba trabajando con imágenes más pequeñas, por lo que no tenía necesidad de crear pequeñas & amp; Grandes versiones del mismo archivo. 

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

});

Así es como se ve mi 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>

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

Una página con 9 presentaciones de fotos diferentes en jQuery listas para usar

Echa un vistazo a la implementación de mi galería: Paisajista de diseño de jardines en la galería de Essex

Pruebe Galleriffic , tiene todo lo que necesita.

Muchos de estos scripts están desactualizados y no funcionan para mí, además requieren un conjunto de imágenes diferentes para las miniaturas. Tuve una búsqueda seria alrededor y encontré algo muy ligero que es simple js, no hay necesidad 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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top