गतिशील जोड़ा तत्व के लिए fancybox कैसे बांधें?

Question

मैं पॉप फॉर्म के रूप में jquery fancybox 1.3.4 का उपयोग करता हूं।

लेकिन मुझे पता चला कि फैंक्सबॉक्स तत्व गतिशील जोड़े से बंधे नहीं जा सकता है। उदाहरण के लिए जब मैं वर्तमान दस्तावेज़ में एक HTML तत्व जोड़ता हूं।

इस तरह: पहले मैं शरीर उपयोग jQuery के लिए एक तत्व जोड़ें,

$(document.body).append("<a href="home/index" class="fancybox"/>"); 

और मैं fancybox फोन,

$(".ajaxFancyBox").fancybox({padding: 0}); 

लेकिन fancybox गतिशील जोड़ा तत्व के साथ काम नहीं करते।

और मैं इस तत्व से fancybox को कॉल नहीं कर सकता?

मैं चीन से आया हूं। तो मेरी अंग्रेजी खराब है, कृपया मुझे माफ़ कर दो।

Answer 1

गतिशील रूप से जोड़े गए तत्वों के लिए fancybox (v1.3.x) को बांधने का सबसे आसान तरीका है:

1: jQuery v1.7.x में अपग्रेड करें (अगर आपके पास अभी तक नहीं)

2: jQuery API on() + focusin घटना का उपयोग कर अपनी स्क्रिप्ट सेट करें।

यह आप के ऊपर अपने कोड (या parent आपको इसकी आवश्यकता के रूप में की parent) के अनुसार class="ajaxFancyBox" के साथ अपने तत्वों की parent तत्व खोजने के लिए और इसे करने के लिए jQuery on() देते हैं तो उदाहरण के लिए, इस एचटीएमएल होने की जरूरत है काम करने के लिए:

<div id="container"> 
<a class="ajaxFancyBox" href="image01.jpg">open image 01</a> 
<a class="ajaxFancyBox" href="image02.jpg">open image 02</a> 
</div> 

.. हम on() और focusin घटना तत्व को id="container" (parent) के साथ उदाहरण के रूप में ऊपर लागू होगा, जैसे:

$("#container").on("focusin", function(){ 
$("a.ajaxFancyBox").fancybox({ 
    // fancybox API options here 
    'padding': 0 
}); // fancybox 
}); // on 

आप की आवश्यकता के रूप में आप किसी भी fancybox विकल्प लागू कर सकते हैं। इसके अतिरिक्त आप की तरह की सामग्री (on() विधि के अंदर) के विभिन्न प्रकार के लिए अलग अलग स्क्रिप्ट हो सकती हैं:

$("#container").on("focusin", function(){ 
$("a.ajaxFancyBox").fancybox({ 
    // fancybox API options here 
    'padding': 0 
}); // fancybox 
$("a.iframeFancyBox").fancybox({ 
    // fancybox API options here 
    'padding': 0, 
    'width': 640, 
    'height': 320, 
    'type': 'iframe' 
}); // fancybox 
}); // on 

महत्वपूर्ण: उदाहरण के ऊपर है कि क्रोम पर की तरह काम नहीं करेगा। वैकल्पिक हल अपने तत्वों को बाध्य सभी के लिए tabindex विशेषता जोड़ने के लिए की तरह

<div id="container"> 
<a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a> 
<a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a> 
</div> 

कि इस मुद्दे को हल करती है और काम करेंगे fancybox (के रूप में तक मुझे पता है) सहित IE7 + अधिकांश ब्राउज़र में है।

See my demo page here

अद्यतन: 07 मार्च, 2012

मुझे बताया गया था कि इस विधि केवल काम करता है जब आप पृष्ठ के लिए नई सामग्री जोड़ नहीं लेकिन जब आप पृष्ठ की सामग्री बदलें।

विधि वास्तव में ऊपर वर्णित दो परिदृश्यों में से किसी एक पर काम करती है। बस सुनिश्चित करें कि नई प्रतिस्थापन सामग्री भी कंटेनर के अंदर लोड की गई है जहां आपने .on() विधि लागू की थी।

See demo

क्रोम के लिए tabindex वैकल्पिक हल भी लागू होता है।

Answer 2

तुम गलत वर्ग के नाम निर्दिष्ट कर रहे हैं, ऐसा करें:

$(".fancybox").fancybox({padding: 0}); 

Answer 3

आप इस शायद कुछ इस तरह की कोशिश कर सकते:

$(document.body).append("<a href='home/index' class='fancybox' onclick='showFancybox()'/>"); 

और फिर बनाने के लिए एक समारोह बनाने के लिए और दिखाने के लिए fancybox:

function showFancybox(){ 
    $.fancybox(
      '<h2>Hi!</h2><p>Content of popup</p>', 
      { 
        'autoDimensions' : false, 
       'width'    : 350, 
       'height'   : 'auto', 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none' 
      } 
     ); 
} 

Answer 4

मैं जैसा कि ऊपर टिप्पणी में सुझाव दिया

Appending dynamically generated html using jQuery does not play well with Fancybox

Answer 5

पर सवाल इस तरह एक ही आप उत्तर मिल सकता है उत्तर दिया, हम समस्याओं (बाध्यकारी गतिशील तत्वों के तत्व) के इस प्रकार में दृष्टिकोण निम्न का उपयोग कर सकते हैं -

$("#container").on("focusin", function(){ 

    if($(this).hasClass("fancybox-bind")){    //check if custom class exist 
     return 0;           //now fancybox event will not be binded 
    }else{            //add class to container 
     $(this).addClass("fancybox-bind"); 
    } 

    $("a.ajaxFancyBox").fancybox({      // fancybox API options here 
     'padding': 0 
    }); // fancybox 

    $("a.iframeFancyBox").fancybox({      // fancybox API options here 
    'padding': 0, 
    'width': 640, 
    'height': 320, 
    'type': 'iframe' 
    }); // fancybox 
}); // on