En iyi jQuery nedir "küçük resme tıklayın ve ana resmi değiştir" modülüne?

Question

İşte (bu bir fark yapar, tüm dinamik olarak oluşturulmuş) Ben ne: Görüntülerin

• listesi her resim
• her resim

için bir küçük için

şeklinde bir başlık Sayfa bir tam boyutlu görüntü ve tüm küçük resimlerle yüklenmelidir. Bir kullanıcı küçük resmi tıklattığında, tam boyutlu görüntü, altyazısına sahip yeni resmi gösterir. Başka bir küçük resme tıklarlarsa, resim (ve resim yazısı) tekrar değişir.

Çok karmaşık değil. Birkaç ay önce bir çözümü bir araya getirdim, ama tekrar yapmam gerekiyor ve ben bu şahane koda bakıyorum ve daha iyi bir yolun olması gerektiğini düşünüyorum (ve jQuery'yi bilmek, başka biri zaten yaptı ve bitti iyi).

Düşünceler? Bağlantılar?

Teşekkürler!

Answer 1

Burada çok güzel görünüyor ve jQuery ile yazılmış biri: Photo Slider

Ve burada biraz daha iyi gibi başka bir şeydir: Galleria

Answer 2

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

9 farklı fotoğraf slayt gösterileri içeren bir sayfa jQuery Kullanıma hazır

Answer 3

Işık Kutusunu Denediniz mi? Benim galleria uygulanması dışarı http://leandrovieira.com/projects/jquery/lightbox/

Answer 4

Kontrol: Garden design Landscaper in Essex Gallery

Answer 5

Galleriffic deneyin, size gereken her şeye sahiptir.

Answer 6

Buradaki cevapların çoğu bir canonla uçmak gibidir!

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

Tek ihtiyacınız olan budur .. 4 satır kod.

buraya bakın: gallery-in-4-lines

Answer 7

Bina krembo99's answer he linked here kapalı, müvekkilim böyle bir özellik talep edilirken Zaten yüzlerce fotoğraf yükledi olduğu gibi benim çözüm paylaşmak istedim. Bunu akılda tutarak, sağlanan kodlara birkaç tane ekstra satır ekleyerek, parametrelerime uyan bir çözüm bulabildim.

Aynı zamanda daha küçük resimlerle çalışıyordum, bu yüzden aynı dosyanın küçük & büyük sürümlerini oluşturmaya gerek kalmadı.

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

}); 

İşte HTML'm nasıl görünüyor.

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