मैं थंबनेल कैसे बना सकता हूं <img> क्लिक करते समय पूर्ण आकार की छवि दिखाएं?

आम तौर पर आप छवि के स्रोत के रूप में src और वैकल्पिक पाठ के रूप में alt के साथ एक छवि tage है:मैं थंबनेल कैसे बना सकता हूं <img> क्लिक करते समय पूर्ण आकार की छवि दिखाएं?

<img src="image1.gif" alt="Image 1" />

आप की तरह कुछ मिल सकता है ?:

<img src="image1.gif" alt="image2.gif" />

है

तो इसका मतलब है कि src में एक छवि स्रोत है और alt में एक छवि स्रोत भी है।

मैं क्या करना चाहता हूं फ़्लिकर एपीआई (एक अंगूठे छवि और सामान्य आकार की छवि) का उपयोग करके फ़्लिकर से 2 छवियों को खींचें और जब उपयोगकर्ता अंगूठे पर क्लिक करता है, तो सामान्य आकार की छवि दिखाई जाती है।

मैं कुछ इस तरह की कोशिश की है:

<a href="image2.gif" ><img src="image1.gif"/></a>

... लेकिन मैं अंगूठे के रूप में डिफ़ॉल्ट 'not found' छवि प्राप्त (वास्तव में मौजूद है, भले ही छवि है)।

मैं JQuery/जावास्क्रिप्ट का उपयोग कर रहा हूं।

कोई भी मदद, सुझाव या यहां तक कि विकल्प सभी का स्वागत और सराहना की जाती है।

धन्यवाद

जबाब सैम के लिए धन्यवाद,

मैं लाइटबॉक्स पसंद नहीं है क्योंकि मैं इसे बहुत धीमी गति से और फैंसी पाते हैं।

लेकिन मुझे geowa4 का विचार पसंद है।

लेकिन कृपया, आने वाले अपने जवाब रखना ...

धन्यवाद

स्रोत

2009-01-22 A Hassan

alt पाठ है कि (जब छवि लोड नहीं किया जा सकता है प्रदर्शित किया जाता है या उपयोगकर्ता के ब्राउज़र छवियों का समर्थन नहीं करता के लिए जैसे पाठकों अंधे लोग)।

लाइटबॉक्स की तरह कुछ का उपयोग कर प्रयास करें:

http://www.lokeshdhakar.com/projects/lightbox2/

अद्यतन: इस पुस्तकालय शायद के रूप में बेहतर अपने jQuery के आधार पर जो आप अपने का उपयोग कर http://leandrovieira.com/projects/jquery/lightbox/

स्रोत

2009-01-22 03:13:52 Sam

मैं ऐसा नहीं होता ने कहा है - alt टैग विशेष रूप से तब होती है जब आपकी छवि प्रदर्शित नहीं होती है। हालांकि, और यह बहुत सारी jQuery सामग्री पर लागू होता है, "rel" विशेषता बहुत उपयोगी है।

स्रोत

2009-01-22 03:17:17

इस प्रकार की कार्यक्षमता को कुछ जावास्क्रिप्ट की आवश्यकता होगी, लेकिन शायद सीएसएस का उपयोग करना संभव है (आईई 6 & 7 के अलावा अन्य ब्राउज़रों में)।

स्रोत

2009-01-22 03:17:25 dylanfm

यह आप क्या उम्मीद कर रहे हैं क्या करेंगे नहीं:

<img src="image1.gif" alt="image2.gif" />

ALT विशेषता केवल-पाठ है - यह कुछ भी विशेष नहीं करेंगे यदि आप इसे किसी छवि URL दे।

यदि आप प्रारंभ में कम रेज छवि प्रदर्शित करना चाहते हैं, तो इसे उच्च रेज छवि के साथ प्रतिस्थापित करें, तो आप छवियों को स्वैप करने के लिए कुछ जावास्क्रिप्ट कोडिंग कर सकते हैं। या, शायद छवि को एक div में लोड करें जिसमें कम रेज छवि से भरा पृष्ठभूमि पैटर्न है। फिर, जब उच्च रेज छवि लोड हो जाती है, तो यह पृष्ठभूमि को ओवरटॉप लोड कर देगी।

दुर्भाग्यवश, ऐसा करने का कोई सीधा तरीका नहीं है।

आपका दूसरा प्रयास image2 के लिए एक लिंक बनाएगा, लेकिन वास्तव में image1 प्रदर्शित करेगा।

<a href="image2.gif" ><img src="image1.gif"/></a>

यदि आप एक उच्च res संस्करण पॉप अप करना चाहते हैं, तो @ सैम का सुझाव एक अच्छा विचार है।

यह सीएसएस आप के लिए काम कर सकते हैं (यह Firefox 3 में मेरे लिए काम करता है):

<html> 
<head> 
    <style> 
     .lowres { background-image: url('low-res.png');} 
    </style> 
</head> 
<body> 
    <div class="lowres" style="height:500px; width:500px"> 
     <img src="hi-res.png" /> 
    </div> 
</body> 
</html>

कि उदाहरण में, आप छवि की है कि div ऊंचाई/चौड़ाई सेट करना होगा। यह वास्तव में दोनों छवियों को एक साथ लोड करेगा, लेकिन कम-रेज एक लोड को जल्दी से मानते हुए, आप इसे पहले देख सकते हैं जबकि हाय-रेज छवि डाउनलोड।

स्रोत

2009-01-22 03:18:17

<img src='thumb.gif' onclick='this.src="full_size.gif"' />

बेशक आप जहां भी चाहें छवि लोड करने के लिए ऑनक्लिक ईवेंट बदल सकते हैं।

स्रोत

2009-01-22 03:19:54 geowa4

छवि प्री-लोडिंग ^{बोनस के साथ एक स्क्रिप्ट रहित, सीएसएस-केवल प्रयोगात्मक दृष्टिकोण!} और केवल फ़ायरफ़ॉक्स में काम करता है जो:

<style> 
a.zoom .full { display: none; } 
a.zoom:active .thumb { display: none; } 
a.zoom:active .full { display: inline; } 
</style> 

<a class="zoom" href="#"> 
<img class="thumb" src="thumbnail.png"/> 
<img class="full" src="fullsize.png"/> 
</a>

डिफ़ॉल्ट रूप से थंबनेल दिखाता है। माउस बटन पर क्लिक करके दबाए गए पूर्ण आकार की छवि दिखाता है। जैसे ही बटन जारी किया जाता है, थंबनेल पर वापस जाता है। मैं किसी भी तरह से सुझाव नहीं दे रहा हूं कि इस विधि का उपयोग किया जाए; यह सिर्फ एक सीएसएस-केवल दृष्टिकोण का एक डेमो है जो [बहुत] आंशिक रूप से समस्या हल करता है। कुछ जेड-इंडेक्स + सापेक्ष स्थिति tweaks के साथ, यह अन्य ब्राउज़रों में भी काम कर सकता है।

स्रोत

2009-01-22 04:06:15

<a href="image2.gif" ><img src="image1.gif"/></a>

तकनीक हमेशा मेरे लिए काम किया है। मैंने इसे अपने सुपर बाउल डायरी में अच्छे प्रभाव के लिए इस्तेमाल किया, लेकिन मुझे लगता है कि मैंने उपयोग की जाने वाली स्क्रिप्ट टूटी हुई हैं। एक बार जब मैं उन्हें ठीक कर दूं तो मैं यूआरएल में संपादित करूंगा।

स्रोत

2009-01-22 04:57:06

यहां लाइटबॉक्स का कोणीय संस्करण है। बस बहुत बढ़िया :)

नोट: मैंने यह जवाब दिया है इसलिए टैग के तहत कोई जेएस लाइब्रेरी का उल्लेख नहीं किया गया है।

angular-bootstrap-lightbox

<ul ng-controller="GalleryCtrl"> 
    <li ng-repeat="image in images"> 
    <a ng-click="openLightboxModal($index)"> 
     <img ng-src="{{image.thumbUrl}}" class="img-thumbnail"> 
    </a> 
    </li> 
</ul>

स्रोत

2016-03-03 11:46:52 Sampath

मैं थंबनेल कैसे बना सकता हूं <img> क्लिक करते समय पूर्ण आकार की छवि दिखाएं?

उत्तर

संबंधित मुद्दे