पृष्ठ लोड होने पर मैं एक लाइट बॉक्स में एक छिपे हुए div की सामग्री दिखाना चाहता हूं।लाइटबॉक्स प्लगइन रंगबॉक्स का उपयोग कैसे करें?
मैं color box के साथ ऐसा कैसे कर सकता हूं?
मैं क्या समझ नहीं कर रहा हूँ:
मैं उनके सीएसएस फ़ाइलों का उपयोग की जरूरत है? कौन सा, यह कहां है?
पेज लोड होने पर मैं लाइटबॉक्स कैसे बना सकता हूं?
$(document).ready(function(){
$("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});
जियोसेफ का जवाब सही रास्ते पर था। मुझे दिखाए जाने से पहले div को दृश्यमान बनाना था (अन्यथा यह सिर्फ एक ब्लैक स्क्रीन दिखाता है)। और फिर उपयोगकर्ता को प्रकाश बॉक्स बंद करने के बाद div को छिपाना पड़ा।
नोट: मुझे अपनी छवियों को डालने वाली निर्देशिका को इंगित करने के लिए सीएसएस फ़ाइल को भी संपादित करना पड़ा।
$(document).ready(function(){
$('#div_id_i_want_to_show').show();
$.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'});
$(document).bind('cbox_closed', function(){
$('#div_id_i_want_to_show').hide();
});
});
आप से जो भी विषय आप चाहते हैं ColorBox सीएसएस फ़ाइल का उपयोग करने की आवश्यकता है:
मैं इस लेकिन कोई किस्मत की कोशिश की। डाउनलोड में 5 शामिल हैं। फ़ोल्डर्स उदाहरण 1, उदाहरण 2, उदाहरण 3, उदाहरण 4, उदाहरण 5 देखें। प्रत्येक में एक सीएसएस फ़ाइल और छवियों के साथ एक फ़ोल्डर होगा। यदि आप चाहें तो आप अपनी खुद की कस्टम थीम भी बना सकते हैं।
पृष्ठ लोड आप सार्वजनिक विधि का उपयोग करने की आवश्यकता पर ColorBox को खोलने के लिए आदेश में: $ .colorbox()
कार्य उदाहरण: http://jsbin.com/uficu
कि उदाहरण में मैं एचटीएमएल: <div id="content">Hello from JSBin</div>
और सार्वजनिक विधि: $ .colorbox ({href: '# सामग्री', खुले: सच है, इनलाइन: सच}) प्रलेखन
चेक आउट: http://colorpowered.com/colorbox/
खुला विकल्प ओली का प्रयास करें:
यहाँ मेरा अंतिम कोड है।
$(".el").colorbox({open:true})
यहां एक चाल है। इसके लिए जावास्क्रिप्ट (या रंगीन बंद घटना को हुक) जोड़ना जरूरी नहीं है।
jquery.colorbox आपकी इनलाइन सामग्री को उस संरचना में स्थानांतरित करता है जो इसे एचटीएमएल> बॉडी रूट बनाता है, इसे प्रदर्शित करने से पहले, और इसे बंद होने पर वापस ले जाता है। यह एक अजीब व्यवहार आईएमओ है, लेकिन लाभ उठाएं और तदनुसार अपना 'छुपा नियम' लागू करें।
<style>
#div_id_i_want_to_show { display: block; ...your other style rules... }
#divParent #div_id_i_want_to_show { display: none; }
<style>
<div id='parent'><div id='div_id_i_want_to_show'>...
वैकल्पिक रूप से, नियमों को उलटने और जगह एक है कि एक colorbox से परिभाषित तत्व पर निर्भर करता है 'नियम से पता चलता है'।
<style>
#div_id_i_want_to_show { display: none; ...your other style rules... }
.colorbox #div_id_i_want_to_show { display: block; }
<style>
<div id='div_id_i_want_to_show'>...
ओह, भी, अभी तक एक और विकल्प के लिए एक .hiddenDiv आवरण के अंदर अपने #div_id_i_want_to_show रखने के लिए है।
<style>
#div_id_i_want_to_show { ...your style rules... }
.hiddenDiv { display: none; }
<style>
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...
कुछ बटन emailPopup
<div class="emailUse">
<a class="emailPopup" href="#emailPopup_content">Mail Me</a>
</div>
आप कुछ पॉपअप जिसका आईडी खोलना चाहते हैं पर क्लिक करने पर emailPopup_content colorbox
<div style='display: none'>
<div id='emailPopup_content'>
Hi user,
Thank you!
</div>
</div>
आप सभी jQuery के रूप में लिखें करने की जरूरत है उपयोग कर रहा है:
$(document).ready(function() {
$('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"});
});
स्पष्टीकरण:
<head>
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>
http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css
आप दिखा छोड़ और रखकर छिपा कर सकते हैं: के रूप में के तहत href
नहीं भूल करते शामिल करने के लिए संदर्भित jQuery छिपा div emailPopup_content पॉपअप में दिखाया गया है div जो आप एक छिपे हुए div के अंदर "#div_id_i_want_to_show" दिखाना चाहते हैं। – mcassano