रनटाइम पर आप फैंसीबॉक्स का आकार कैसे बदलते हैं?

Question

क्या किसी को भी रनटाइम के दौरान jQuery Fancybox का आकार बदलने का तरीका पता है?

जब fancybox मैं यह कर सकता आरंभ:

$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 }); 

मैं गतिशील सामग्री के साथ fancybox भरने रहा हूँ और मैं यह सामग्री के अनुसार आकार बदलने के लिए चाहते हैं।

Answer 1

हैं Fancybox jQuery यूआई का हिस्सा था, आप इसे इस तरह करना चाहते हैं:

$("tag").fancybox.option('frameWidth', 500); 

लेकिन के रूप में यह इस तरह के एक तरीका प्रदान करने के लिए प्रतीत नहीं होता है, तो आप सीएसएस सीधे निर्धारित करने की आवश्यकता:

$("#fancy_outer").css({'width': '500px', 'height': '500px'}); 

Answer 2

एलन का समाधान अधूरा है क्योंकि आकार को संशोधित करने के बाद बॉक्स को स्क्रीन पर केंद्रित नहीं किया गया है (कम से कम नवीनतम jquery और fancybox संस्करणों के साथ)।

तो, पूर्ण समाधान होगा:

$("#fancy_outer").css({'width': '500px', 'height': '500px'}); 
$("tag").fancybox.scrollBox(); 

Answer 3

आप संस्करण Fancybox 1.3 उपयोग कर रहे हैं, वहाँ एक आकार बदलने विधि है:

$ .fancybox.resize();

संस्करण 2.x of Fancybox ही के लिए के साथ किया जा जाएगा:

$ .fancybox.update()

कौन इसके अंदर सामग्री के आकार के आधार पर सक्रिय fancybox आकार परिवर्तन ।

Answer 4

$ ("# फैंक्सबॉक्स-लपेटें") चौड़ाई (चौड़ाई); // या ऊंचाई या जो भी

$ .fancybox.center();

Answer 5

हे लगभग दो दिनों से लड़ने के बाद, मैं ओवरले ऊंचाई को बदलने में कामयाब रहा। उम्मीद है कि यह उपयोगी हो सकता है:

$('#register-link a').fancybox({ 
    onComplete: function(){ 
     body_height = $('body').height(); 
     fancybox_content_height = $('#fancybox-content').height(); 
     fancybox_overlay_height = fancybox_content_height + 350; 
     if(body_height < fancybox_overlay_height) { 
      $('#fancybox-overlay').css('height', fancybox_overlay_height+'px'); 
     } 
    } 
}); 

क्या इस कोड को कर रही है, यह पहली शरीर, # fancybox-सामग्री और # fancybox-ओवरले की ऊंचाई की गणना। फिर यह जांचता है कि शरीर की ऊंचाई ओवरले की ऊंचाई से कम है, यदि हां तो यह ओवरले के लिए नई गणना की गई ऊंचाई को असाइन करता है अन्यथा यह डिफ़ॉल्ट शरीर की ऊंचाई

Answer 6

मैं बस आपको इसके बारे में जागरूक करना चाहता हूं।

ऊंचाई समायोजित करने के लिए जावास्क्रिप्ट का उपयोग करके समाधान खोजने के बाद मुझे और मेरे साथी को कुछ आश्चर्यजनक महसूस हुआ।

जांचें कि # fancybox-inner के युक्त तत्वों में पैडिंग या मार्जिन सेट है या नहीं।

यह प्रमुख तत्व (# fancybox-भीतरी मार्जिन/padding परिभाषा के प्रत्यक्ष बच्चों।

बच्चों तत्वों (# fancyfox-भीतरी> div> है।यहाँ) गद्दी हो सकता है, लेकिन समायोजित करने के लिए भूल जाते हैं न:

$('#element').fancybox({ 
    'onComplete' : function(){ 
     $.fancybox.resize(); 
    } 
}); 

Answer 7

मैं सिर्फ एक सुझाव दिया है कि एक सार्वजनिक विधि $ .fancybox.reshow कहते हैं अपने Google समूह https://groups.google.com/forum/#!topic/fancybox/fuUuBJyTrH8 पर Fancybox के लिए पैच तैनात()। यह फैंक्सबॉक्स की ऊंचाई और चौड़ाई को फिर से समझ जाएगा। यह उदाहरण के लिए, दोनों window.onorientationchange और window.onresize साथ काम करता है:

window.onresize = function() { 
    $.fancybox.reshow(); 
} 

Answer 8

$ .fancybox.resize(); मेरे लिए काम नहीं किया है, इसलिए मैं लोड पेज में इस कोड डाल दिया fancybox iframe के भीतर,:

$(document).ready(function(){ 
    parent.$("#fancybox-content").height($(document).height()); 
}); 

आप भी इसे एक कॉलबैक में सेट कर सकते हैं:

$("#mydiv").toggle('fast', function(){ 
    parent.$("#fancybox-content").height($(document).height()); 
}); 

Answer 9

function overlay(){ 
    var outerH = $('#fancybox-outer').height(); 
    var bodyH = $(window).height(); 
    var addH = 300; //add some bottom margin 

    if(outerH>bodyH){ 
    var newH = outerH + addH; 
    }else{ 
    var newH = bodyH + addH; 
    } 

    $('#fancybox-overlay').height(newH+'px'); 

    $.fancybox.center(); 

} 

और घटना पर इसे कहते हैं जब आप की जरूरत है ... (जैसे uploadify onSelect घटना -।> लंबे फ़ाइल सूची fancybox इतना बड़ा बना देता है, और हम फिर से ऊंचाई की गणना)

... 'onSelect' : function(event,ID,fileObj){ 

overlay(); 

}, ... 

Answer 10

यह वह जगह है समाधान मेरा है:

$("#linkpopup").fancybox({ 
    'titlePosition'  : 'inside', 
    'transitionIn'  : 'none', 
    'transitionOut'  : 'elastic', 
    'onComplete' : function(){ 
     $.fancybox.resize(); 
    } 
}); 

Answer 11

मैं भी फैंक्सबॉक्स का आकार बदलने के साथ संघर्ष कर रहा था। समाधान $.fancybox.reposition();

एक आकर्षण की तरह काम करता है!

Answer 12

मुझे Google में लंबे समय तक खोज करने के बाद इस बग का एक समाधान मिला लेकिन कुछ भी नहीं मिला।

चौड़ाई और पेज और यह केंद्र की ऊंचाई तक बॉक्स आकार बदलने के लिए, ऐसा करते हैं:

$("#click-to-open").click(function(){ 

    var url = "url-loader.php"; 
    $.fancybox({ 
     'autoScale'   : false, 
     'href' : url, 
     'padding'    : 0, 
     'type' : 'iframe', 
     'titleShow' : false, 
     'transitionIn'  : 'elastic', 
     'transitionOut'  : 'elastic', 
     'onComplete' : function(){ 
      $('#fancybox-content').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 }); 
      $('#fancybox-wrap').removeAttr('style').css({ 'height' : $(window).height()-100, 'margin' : '0 auto', 'width' : $(window).width()-150 }).show(); 
      $.fancybox.resize(); 
      $.fancybox.center(); 
     } 
    }); 
}); 

Answer 13

जो कोई StackOverflow.com के लिए योगदान करने के लिए धन्यवाद। आप सभी मेरे लिए कई बार जीवन बचा रहे हैं। अब, मैं अंत में कुछ योगदान करने के लिए मिलता है। नीचे मैं रनटाइम क्वांड्री पर आकार बदलने वाले फैंसीबॉक्स पर आ गया था:

मैंने href तत्व विशिष्ट विशेषताओं को आयाम PHP vars के साथ पास किया। फिर फोन किया और fancybox नियंत्रण समारोह और भीतर एम्बेडेड मानकों के साथ एक क्लिक के घटना में विशेषता निर्धारित करते हैं, ...

<a href="ASSET_ABSOLUTE PATH" class="asset" data-fancybox-type="iframe" assetW="$assetW" 
assetH="$assetH">LINK</a> 

$(".asset").click(function(){ 

    var assetW = $(this).attr('assetW'); 

    //to display inter-activities.. 
    $(".asset").fancybox({ 

    width  : assetW, 
    fitToView : false, 
    autoSize : true, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
     'onComplete' : function(){ 
     $.fancybox.resize(); 

     } 
    }); 
}); 

Answer 14

मेरे समाधान है कि (fancybox 1.3.4 के लिए) की तरह था:

खोज

$.fancybox.resize = function() { 
    if (overlay.is(':visible')) { 
     overlay.css('height', $(document).height()); 
    } 

    view = _get_viewport(); 
    var updated_width = view[0]; 
    if (updated_width > selectedOpts.width) { updated_width = selectedOpts.width; } 

    $("#fancybox-wrap, #fancybox-content").css("width", updated_width);   

    $.fancybox.center(true); 
}; 

Answer 15

साथ

$.fancybox.resize = function() { 
     if (overlay.is(':visible')) { 
      overlay.css('height', $(document).height()); 
     } 


     $.fancybox.center(true); 
    }; 

और की जगह मेरे मामले में, मैं मैं एक बहुत ही सरल वेब पेज प्रदर्शित करने के लिए Fancybox का उपयोग कर रहा हूं जिसमें केवल एक छवि है। यह छवि आकार में भिन्न हो सकती है। मेरी समस्या यह थी कि छवि में style="height: NNpx; width: NNpx;" शामिल नहीं था। इसके बिना, फैंक्सबॉक्स ऑटोसाइज अप्रत्याशित परिणाम दे सकता है (उनके दस्तावेज़ http://fancyapps.com/fancybox/ में कहा गया है)।

टीएल; डॉ: स्वत: आकार के लिए सही ढंग से काम करने के लिए चौड़ाई और ऊंचाई विशेषताओं प्रदान करें।

Answer 16

यह विधि मेरे लिए काम करती है।:)

$(".fancybox-wrap.fancybox-desktop.fancybox-type-iframe.fancybox-opened").css({"height": heightToAdjust}); 
$(".fancybox-inner").css({"height": heightToAdjust}); 
if ($.fancybox.isOpened) { 
    if ($.fancybox.current) { 
     $.fancybox.current.height = heightToAdjust; 
    } 
} 
$.fancybox.reposition(); 

Answer 17

उपयोग:

parent.jQuery.fancybox.update(); 

Answer 18

पर Fancybox 3 (नवीनतम संस्करण)

parent.jQuery.fancybox.getInstance().update(); 

रेफरी:http://fancyapps.com/fancybox/3/docs/#iframe