फैंक्सबॉक्स: कैप्शन और अन्य चीजें जोड़ें

Question

मैं जानना चाहता हूं कि मैं फैंक्सबॉक्स में एक शीर्षक (जैसे कैप्शन या लिंक) से अधिक कैसे जोड़ सकता हूं। मुझे पता है कि अगर मैं एक शीर्षक = "Bla" जोड़ता हूं तो यह बॉक्स में दिखाई देगा। लेकिन अगर मैं अपने छवि लिंक में कैप्शन = "ब्लब्ला" जैसे कुछ जोड़ता हूं, तो उस कैप्शन टैग को खींचने के लिए jquery.fancybox.js में मुझे किस कोड की आवश्यकता है?

Answer 1

आपको मूल jquery.fancybox.js फ़ाइल के साथ गड़बड़ करने की आवश्यकता नहीं है क्योंकि आप इस विकल्प को अपनी अनुकूलित फ़ैन्सीबॉक्स स्क्रिप्ट के भीतर जोड़ सकते हैं।

आप HTML5 DOCTYPE का उपयोग कर रहे हैं, तो आप data-* विशेषता का उपयोग आप कैप्शन के लिए तो आप इस HTML हो सकता है हो सकता है:

<a class="fancybox" href="images/01.jpg" data-caption="This is the caption" >Open fancybox</a> 

फिर अपने कस्टम fancybox स्क्रिप्ट की स्थापना की और

तरह beforeShow कॉलबैक का उपयोग कर data-caption मिल

$(document).ready(function() { 
$('.fancybox').fancybox({ 
    beforeShow : function(){ 
    this.title = $(this.element).data("caption"); 
    } 
}); 
}); // ready 

यह title ओवरराइड करेगा और इसके बजाय data-caption का उपयोग करेगा।

दूसरी ओर, आप इस HTML

<a class="fancybox" href="images/01.jpg" title="This is the title" data-caption="This is the caption">Open fancybox</a> 

उपयोग इस स्क्रिप्ट के लिए title विशेषता रखने के लिए और fancybox के title संयोजन दोनों, title और data-caption इसलिए विशेषताओं का निर्माण करने, चाहते हो सकता है

$(document).ready(function() { 
$('.fancybox').fancybox({ 
    beforeShow : function(){ 
    this.title = this.title + " - " + $(this.element).data("caption"); 
    } 
}); 
}); // ready 

इसके अतिरिक्त, आप अपने दस्तावेज़ के भीतर किसी अन्य HTML तत्व से caption/title भी प्राप्त कर सकते हैं (उदाहरण के लिए <div>) जिसमें लिंक या ओथ हो सकते हैं एर HTML तत्वों। कोड उदाहरण के लिए इन पदों की जाँच करें: https://stackoverflow.com/a/9611664/1055987 और https://stackoverflow.com/a/8425900/1055987

नोट: इस fancybox v2.0.6 के लिए +

Answer 2

पुराना सवाल है, लेकिन जेएफके के जवाब के लिए धन्यवाद मुझे पता चला कि fancybox के नवीनतम संस्करण के साथ आप कर सकते हैं title="" विशेषता (डिफ़ॉल्ट रूप से) में एक मान दर्ज करके बस एक कैप्शन जोड़ें। बस सुनिश्चित करें कि यह तत्व पर fancybox कक्षा के साथ शामिल है।