एएसपीनेट पेज पर थंबनेल के रूप में कई छवियां दिखाएं

मैंने अपने फ़ोल्डरों में से किसी एक में उपयोगकर्ता द्वारा अपलोड की गई छवियों को सहेज लिया है। एसक्यूएल सर्वर डीबी में मैं बस छवि के फ़ाइल-नाम को सहेजता हूं। एक आइटम के लिए मेरे पास लगभग 5-6 छवियां हैं I तो मेरे पास कॉलम और इमेजनाम के रूप में एक कॉलम के रूप में एक आइटम आईडी है और मेरे पास तालिका में 1 2 3 4 5 है। मुझे इन सभी छवियों को किसी पृष्ठ पर थंबनेल प्रारूप में प्रदर्शित करने की आवश्यकता है। Craigslist पर पसंद है। मैं कैसे आगे बढ़ूं?

0

1 उत्तर

आप छोटे थंबनेल के साथ एक बड़ी छवि प्रदर्शित करने के लिए जावास्क्रिप्ट/jQuery छवि बॉक्स का उपयोग कर सकते हैं।

यहां दो मुझे पता है -

  1. FancyBox (I'm currently using)
  2. LightBox

Or You can use the following code -

Demo at jsfiddle


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(document).ready(function() {
        $(".container img").mouseover(function() {
            $("#<%= LargeImage.ClientID %>").attr("src", $(this).prop('src'));
        }).mouseout(function() {
            $("#<%= LargeImage.ClientID %>").attr("src",
            "http://placehold.it/400x400&text=Image1");
        });
    });
</script>


<div class="container">
    
    
    
    
</div>
0
जोड़ा
धन्यवाद। खैर, बात यह है कि मैं अपने डीबी से छवियों की संख्या प्राप्त कर सकता हूं। मुझे उन सभी को थंबनेल प्रारूप में दिखाने की ज़रूरत है। अगर वह एक पर क्लिक करता है, तो इसका विस्तार करें। बस क्रेगलिस्ट की तरह। जब मैंने आपके उपरोक्त 2 सुझावों को देखा तो ऐसा लगता है कि मुझे छवियों के सभी लिंक पहले से उल्लेख करने की आवश्यकता है। लेकिन मेरा अलग-अलग होगा। क्या तुम्हारा कोई उदाहरण है, मैं देख सकता हूं?
जोड़ा लेखक RookieAppler, स्रोत
मैं इसके लिए थोड़ा सा नया हूँ। मैं आपके कोड में देखता हूं जो आपके हाथों से पहले छवियों और 5 छवि तत्वों का उल्लेख करता है। लेकिन मेरा ऐसा नहीं हो सकता है। मेरी समस्या यह है कि मेरे पास छवियां हो सकती हैं या नहीं। यदि मैं ग्रिड में पृष्ठ और छवि तत्व (itemtemplate) पर एक टेलरिक रेड्रिड डालता हूं, तो क्या यह काम करेगा? क्या आप मुझे दिखा सकते हैं कि इस प्रारूप में कैसे आगे बढ़ना है? धन्यवाद
जोड़ा लेखक RookieAppler, स्रोत
$ ('# imagesPreview')। संलग्न करें (''); मैं क्लाइंट साइड पर एक div टैग (imagesPreview) में एक छवि जोड़ने की कोशिश कर रहा हूं। लेकिन मुझे खाली छवि मिल रही है, जैसा कि इसके खोखले में है। जब मैं छवि गुणों की जांच करता हूं तो यह सामान्य के लिए 16.jpg दिखाता है और अन्य सभी मान उपलब्ध नहीं हैं। यहाँ क्या गलत है?
जोड़ा लेखक RookieAppler, स्रोत
मैंने जवाब अपडेट किया।
जोड़ा लेखक Win, स्रोत
राडग्रिड का उपयोग होने पर भी विचार समान है। यह मूल रूप से कंटेनर div के अंदर प्रत्येक छवियों पर माउसआउट ईवेंट/होवर संलग्न करता है। आपके मामले में, आप $ ("। RadGrid img") के रूप में सेट कर सकते हैं। FYI , क्लाइंट पक्ष पर काम करने के लिए आपको थोड़ी सी jQuery या जावास्क्रिप्ट को समझने की आवश्यकता है।
जोड़ा लेखक Win, स्रोत
खैर, वेब ब्राउजर आपके स्थानीय फाइल सिस्टम तक नहीं पहुंच सकता <कोड> src = "सी: \\ उपयोगकर्ता \\ जॉन \\ डेस्कटॉप \\ TempFolder \\ 16.jpg" । यह /Images/16.jpg जैसा होना चाहिए।
जोड़ा लेखक Win, स्रोत