सबसे अच्छा jQuery क्या है "थंबनेल पर क्लिक करें और मुख्य छवि बदलें" मॉड्यूल?

Question

यहाँ मैं क्या है (सभी गतिशील रूप से उत्पन्न, कि अगर एक फर्क नहीं पड़ता) है:

• छवियों की एक सूची
• प्रत्येक छवि
• प्रत्येक छवि

के लिए एक थंबनेल के लिए एक शीर्षक पृष्ठ को एक पूर्ण आकार की छवि और सभी थंबनेल के साथ लोड करना चाहिए। जब कोई उपयोगकर्ता थंबनेल पर क्लिक करता है, तो पूर्ण-आकार की छवि दिखाती है कि उसकी छवि के साथ नई छवि। अगर वे एक और थंबनेल पर क्लिक करते हैं, तो चित्र (और कैप्शन) फिर से बदल जाता है।

यह बहुत जटिल नहीं है। मैंने कुछ महीने पहले एक समाधान को हैक किया था, लेकिन मुझे इसे फिर से करने की ज़रूरत है और मैं इस क्रैपी कोड को देख रहा हूं और सोच रहा हूं कि एक बेहतर तरीका होना चाहिए (और jQuery को जानना, किसी और ने इसे पहले ही कर लिया है, और किया यह बढ़िया है)।

विचार? लिंक?

धन्यवाद! Photo Slider

यहाँ और एक और जो मैं थोड़ा बेहतर पसंद है:

Answer 1

यहाँ एक है कि बहुत अच्छा लग रहा है और jQuery में लिखा है है Galleria

Answer 2

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

9 अलग तस्वीर स्लाइडशो के साथ एक पेज jQuery में

Answer 3

क्या आपने लाइटबॉक्स का प्रयास किया है? बाहर मेरी गैलेरिया कार्यान्वयन http://leandrovieira.com/projects/jquery/lightbox/

Answer 4

की जांच: Garden design Landscaper in Essex Gallery

Answer 5

Galleriffic की कोशिश करें, यह सब कुछ आप की जरूरत है।

Answer 6

यहां पर अधिकांश उत्तर एक कैनन के साथ एक फ्लाई शूटिंग की तरह हैं !!

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

यह सब आपको चाहिए .. कोड की 4 पंक्तियां। krembo99's answer he linked here के बंद gallery-in-4-lines

Answer 7

भवन, मैं के रूप में मैं पहले से ही सैकड़ों फ़ोटो अपलोड किया था जब मेरे मुवक्किल इस तरह एक सुविधा का अनुरोध किया था मेरी समाधान साझा करना चाहते थे:

यहाँ देखो। इस बात को ध्यान में रखते हुए, प्रदान किए गए कोड में कुछ अतिरिक्त लाइनें जोड़कर, मैं एक समाधान प्राप्त करने में सक्षम था जो मेरे पैरामीटर फिट करता है।

मैं छोटी छवियों के साथ भी काम कर रहा था, इसलिए मुझे उसी फ़ाइल के बड़े संस्करण & बनाने के माध्यम से जाने की आवश्यकता नहीं थी।

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

}); 

यहां मेरा 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>