ओजी के मान को बदलना: jQuery के साथ छवि

Question

मैं सिर्फ एक HTML पोर्टफोलियो के साथ एक छवि पोर्टफोलियो का निर्माण करता हूं जहां सभी चित्र गतिशील रूप से लोड होते हैं। फेसबुक मेटा ओजी: इमेज को छोड़कर सबकुछ बढ़िया काम करता है।

चूंकि पृष्ठ केवल एक बार लोड होता है, इसलिए मैं ओजी: IMAGE URL असाइन कर सकता हूं ... लेकिन मैं वास्तव में प्रत्येक चित्र को अपने स्वयं के ओजी के साथ रखना चाहता हूं: IMAGE, क्योंकि यह एक फोटो एलबम है।

चित्रों को एक --li class = "open-pic" - टैग पर क्लिक करके लोड किया जाता है। मैं ओजी बदलना चाहता हूं: IMAGE मान जब भी मैं एक --li class = "open-pic" - टैग पर क्लिक करता हूं।

क्या यह संभव है? मैं इस तरह सामान मिला:

$('meta[name=og\\:image]').attr('content', newImageUrl); 

हालांकि, मैं कैसे li.open-पिक onclick घटना को यह लिंक करने के लिए पता नहीं है। धन्यवाद! चित्र URL एक बार ... लेकिन मैं वास्तव में के साथ अपने स्वयं ओजी प्रत्येक तस्वीर चाहते हैं:

जी

Answer 1

$('li.open-pic').click(function(){ 
$('meta[name=og\\:image]').attr('content', newImageUrl); 
}); 

Answer 2

के बाद से सिर्फ एक बार पृष्ठ लोड हो तो मैं ओजी असाइन कर सकते हैं छवि, चूंकि यह एक फोटो एलबम है।

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

समाधान: प्रत्येक फोटो के लिए अपनी मेटा जानकारी के साथ एक व्यक्तिगत यूआरएल प्रदान करें - और अपनी तस्वीर/शेयर कार्यक्षमता/जो भी एफबी सुविधा प्रत्येक तस्वीर के लिए उस यूआरएल को इंगित करती है।

(कैसे आप चीजों क्लाइंट साइड कोई फर्क नहीं पड़ता संभाल - आप अभी भी एक पृष्ठ में सभी तस्वीरें प्रदर्शित कर सकते हैं, AJAX, जो कुछ भी आप की तरह के माध्यम से नई सामग्री लोड - लेकिन आप अपनी तस्वीरों के लिए अलग-अलग URL की आवश्यकता होगी उनके लिए व्यक्तिगत ओपन ग्राफ ऑब्जेक्ट्स के रूप में पहचाना जा सकता है।)

Answer 3

यह कॉलन है। सिंगल कोट & इस तरह के डबल-कोट्स का उपयोग करने का प्रयास करें:

var imgSrc = $(this).find('img').attr('src'); // image stored as variable 
$('meta[property="og:image"]').attr('content', imgSrc); // assigns meta property