2010-01-10 14 views
5

मैं jquery का उपयोग कर एक फोटो गैलरी बना रहा हूं। मैं थंबनेल बनाने के लिए लोड पर छवियों को ले रहा हूं और आकार बदल रहा हूं। मैं छवि के आकार का मूल मूल्य प्राप्त करना चाहता हूं ताकि बाद में मैं इसे अपने मूल आकार में ले जा सकूं। क्या कोई जानता है कि इसे कैसे करना है? मेरे पास निम्न कोड है:jquery छवि का आकार प्राप्त करें

obj.find("img").each(function(){ 
}); 

यह कंटेनर div के भीतर सभी छवियों के माध्यम से loops। मैंने फिर करने की कोशिश की:

$(this).width(); //didnt work 
this.width; //didnt work 

कोई विचार?

+0

https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript –

उत्तर

7

मैंने हाल ही में the same question से पूछा और एक अच्छा जवाब मिला: एक नया छवि तत्व बनाया गया है लेकिन डोम से जुड़ा नहीं है। इसकी ऊंचाई और चौड़ाई छवि के मूल आयाम हैं।

संपादित करें: मैंने टिप्पणियों में वादा किए गए अब मेरे प्रश्न का उत्तर संपादित किया है। छवि के आकार का पता लगाने के लिए अब विश्वसनीय परिणामों की गारंटी के लिए छवि के onload ईवेंट से जुड़ा हुआ है।

1

एक तत्व छिपा हुआ है, तो आप इसे दिखाने से पहले इसकी चौड़ाई या ऊंचाई प्राप्त करना चाहते हैं यदि आप अपने आकार नहीं मिल सकता है, आप एक नकारात्मक

#your_image {left:-1000%;}

उसके बाद ही

तरह ऑफसेट देने की आवश्यकता

$(this).width()

आपको परिणाम देगा।

+0

एक टिप्पणी -1 के लिए अच्छा होगा। – Sinan

0

छवि आकार प्राप्त करने के लिए jQuery का उपयोग करने में समस्या यह है कि आमतौर पर हम $() तैयार (फ़ंक्शन()) का उपयोग करते हैं; हमारे जावास्क्रिप्ट को निष्पादित करने के लिए, लेकिन उस बिंदु पर पृष्ठ लोड, छवि अभी तक लोड नहीं हुई है, इसलिए आपको पहले ऐसा होने की प्रतीक्षा करनी होगी। एक बार जब आप सुनिश्चित हो जाएं कि छवि लोड हो गई है, और छवि दिखाई दे रही है, तो आप सामान्य रूप से $ .width() और $ .height() का उपयोग कर सकते हैं।

एक चीज आप भी कोशिश कर सकते हैं यदि आप अपनी छवि आकार उत्पन्न करने के लिए एक स्क्रिप्ट भाषा का उपयोग कर रहे हैं तो फ़ाइल पढ़ने और आकार को प्राप्त करने के बाद चौड़ाई और ऊंचाई विशेषताओं को रखना है। चूंकि आप एक गैलरी बना रहे हैं, इसलिए आप पीडीपी के लिए जीडी के इमेजमैजिक के साथ बैकएंड पर अपनी छवियों का आकार बदलने पर विचार कर सकते हैं। उन उपकरणों के लिए ऑनलाइन बहुत सारे दस्तावेज हैं, इसलिए मैं यहां नहीं पहुंचूंगा।

0
$("#your_img").imagesLoaded(function(){<br> 
alert($(this).width());<br> 
alert($(this).height());<br> 
}); 
+0

मुझे लगता है कि आप छवियों का उपयोग कर रहे हैं लोड किए गए jQuery प्लगइन https://github.com/desandro/imagesloaded जो एक आवश्यक स्पष्टीकरण है। – Duncanmoo

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