jQuery là gì nhất "nhấp vào hình thu nhỏ và thay đổi hình ảnh chính" mô-đun?

Question

Dưới đây là những gì tôi có (tất cả được tạo ra tự động, nếu mà làm cho một sự khác biệt):

• Một danh sách các hình ảnh
• Một chú thích cho mỗi hình ảnh
• Một thumbnail cho mỗi hình ảnh

Trang nên tải với một hình ảnh có kích thước đầy đủ và tất cả hình thu nhỏ. Khi người dùng nhấp vào hình thu nhỏ, hình ảnh có kích thước đầy đủ sẽ hiển thị hình ảnh mới có chú thích của nó. Nếu họ nhấp vào hình thu nhỏ khác, hình ảnh (và chú thích) thay đổi một lần nữa.

Nó không phải là rất phức tạp. Tôi đã tấn công với nhau một giải pháp cách đây vài tháng, nhưng tôi cần phải làm lại và tôi đang xem mã độc này và nghĩ rằng phải có một cách tốt hơn (và biết jQuery, một người khác đã thực hiện nó và hoàn thành nó tốt).

Suy nghĩ? Liên kết?

Cảm ơn!

Answer 1

Dưới đây là một trông khá đẹp và được viết bằng jQuery: Photo Slider

Và đây là một mà tôi thích một chút tốt hơn: Galleria

Answer 2

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

Một trang với 9 trình chiếu hình ảnh khác nhau trong jQuery sẵn sàng sử dụng

Answer 3

Bạn đã thử Hộp đèn chưa? http://leandrovieira.com/projects/jquery/lightbox/

Answer 4

Kiểm tra thực hiện galleria tôi: Garden design Landscaper in Essex Gallery

Answer 5

Hãy thử Galleriffic, nó có mọi thứ bạn cần.

Answer 6

Hầu hết các câu trả lời ở đây giống như quay một con ruồi với một cuốn kinh điển !!

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

đây là tất cả những gì bạn cần .. 4 dòng mã.

xem ở đây: gallery-in-4-lines

Answer 7

Building tắt của krembo99's answer he linked here, tôi muốn chia sẻ giải pháp của tôi như tôi đã tải lên hàng trăm bức ảnh khi khách hàng của tôi đã yêu cầu một tính năng như thế này. Với ý nghĩ đó, bằng cách thêm một vài dòng phụ vào mã được cung cấp, tôi đã có thể nhận được một giải pháp phù hợp với các tham số của tôi.

Tôi cũng đang làm việc với các hình ảnh nhỏ hơn, vì vậy tôi không cần phải thực hiện việc tạo một phiên bản lớn của cùng một tệp với các phiên bản lớn &.

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

}); 

Dưới đây là giao diện HTML của tôi.

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