¿Cuál es el mejor jQuery "haz clic en una miniatura y cambia la imagen principal"?

Question

Aquí es lo que tengo (todo el generadas dinámicamente, si eso hace la diferencia):

• una lista de imágenes
• un título para cada imagen
• en 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) cambia de nuevo.

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

¿Pensamientos? ¿Campo de golf?

Gracias!

Answer 1

Aquí hay uno que se ve bastante agradable y está escrito en jQuery: Photo Slider

Y aquí es otra cosa que me gusta un poco mejor: Galleria

Answer 2

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

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

Answer 3

¿Has probado Lightbox? http://leandrovieira.com/projects/jquery/lightbox/

Answer 4

Compruebe hacia fuera mi aplicación Galleria: Garden design Landscaper in Essex Gallery

Answer 5

Trate Galleriffic, tiene todo lo que necesita.

Answer 6

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 necesita .. 4 líneas de código.

vistazo aquí: gallery-in-4-lines

Answer 7

edificio fuera de krembo99's answer he linked here, que quería compartir mi solución como ya había subido cientos de fotos cuando mi cliente había solicitado una función como esta. Con esto en mente, al agregar algunas líneas adicionales al código provisto, pude obtener una solución que se ajustaba a mis parámetros.

También estaba trabajando con imágenes más pequeñas, así que no tuve que pasar por la creación de pequeñas 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>