स्थिति fancybox 2 मैन्युअल

Question

मैं नहीं मेरे जीवन के लिए, यह पता लगाने कर सकते हैं कि कैसे मैं उपयोग करने के लिए fancybox 2 स्थान बदल सकते हैं left: 47px; और top: 147px

मैं स्रोत कोड के माध्यम से पढ़ा है, और यह हैकिंग के बिना, मैं नहीं दिख रहा है पोजीशनिंग को ओवरराइड करने का एक तरीका।

autoCenter सेट करने के लिए पहले के बाद केवल ऑटो-सेंसरिंग को रोकता है।

सीएसएस को बदलने के लिए jQuery का उपयोग करना, या सीएसएस को लागू करने के लिए कस्टम रैपर देना या तो काम नहीं करता है, क्योंकि फैंक्सबॉक्स हमेशा इनलाइन सीएसएस जोड़ता है जो मेरे सभी प्रयासों को ओवरराइट करता है।

क्या फैंसीबॉक्स को खुद को पोजीशनिंग रोकने और अपनी पूर्ण स्थिति का उपयोग करने के लिए कहने का कोई तरीका है?

Answer 1

शैलियों !important संशोधक का उपयोग कर शैलियों कर सकते हैं।

Fancybox उपयोग के मामले के लिए निम्नलिखित जावास्क्रिप्ट स्थिति को पार कर जाएगी:

.fancybox-wrap { 
    top: 147px !important; 
    left: 47px !important; 
} 

Answer 2

आप सीएसएस इसलिए की तरह नहीं बदल सकते हैं? जाहिर है 'शीर्ष' और 'छोड़'

$("a.fancybox1").fancybox({ 
'hideOnContentClick': false, 
     'onComplete' : function() { 
      $("#fancybox-wrap").css('margin', 'auto'); 
     } 
    }); 

Answer 3

को मार्जिन संपत्ति को बदलने मैं beforeShow-हैंडलर में मैन्युअल रूप से नया सीएसएस श्रेणी जोड़कर इस समस्या का समाधान। मैंने fancybox2 का इस्तेमाल किया।

सीएसएस:

.fancybox-wrap22 { 
    top: 22% !important; 
} 

js:

$(".open_fancybox").click(function() { 
    $.fancybox.open('<h1>lorem ipsum</h1>', { 
    beforeShow : function() { 
     $('.fancybox-wrap').addClass('fancybox-wrap22'); 
    } 
    }); 
    return false; 
}); 

Answer 4

मुझे लगता है कि आपको लगता है कि रास्ते में सीएसएस बदल नहीं सकते, कारण fancybox कोर # fancybox-रैप की शैली संपत्ति संपादित कर रहा है सब समय। इसलिए आपको एक नया वर्ग जोड़ना होगा, जैसा कि मेरे उदाहरण में वर्णित है। अन्यथा आप किसी भी visuell परिवर्तन नहीं देख पाएंगे।

Answer 5

मुझे एक ही समस्या है - मैं मैन्युअल रूप से एक फैंक्सबॉक्स रखना चाहता हूं लेकिन यह स्वचालित रूप से फिर से केंद्रित रहता है।

मैं केंद्र समारोह को निष्क्रिय करने इसे हल:

$.fancybox.center = function(){}; 

Answer 6

मैं Fancybox2 के लिए इस समाधान मिल गया। एक या अधिक आयामों को बदलने के लिए आप डिफ़ॉल्ट _getPosition विधि को ओवरराइड कर सकते हैं।

// Disable vertical repositioning 
var orig = $.fancybox._getPosition; 
$.extend($.fancybox, { 
    _getPosition: function(onlyAbsolute) { 
     var rez = orig(onlyAbsolute); 
     delete rez.top; 
     return rez; 
    } 
}); 

Answer 7

लुकास टेक्सीरा सही था! यह मेरे लिए काम किया। पहले केंद्र फ़ंक्शन को बंद करें, फिर अपनी इच्छानुसार इनलाइन सीएसएस सेट करने के लिए पूर्ण ईवेंट पर उपयोग करें।

<script> 
     jQuery(document).ready(function() { 

      //turn off center function 
      $.fancybox.center = function() { }; 

      //use onComplete event to modify inline css 
      $("#ModalPopup").fancybox({ 
       'modal': true, 
       'onComplete': function() { 
        $("#fancybox-wrap").css({ 'left': '250px', 'top': '150px' }); 
       } 
      }); 

     }); 
    </script>