Jquery - Fancybox - पृष्ठभूमि पृष्ठ Shift Issue

Question

फैंक्सबॉक्स अच्छी तरह से लोड हो रहा है और जैसा कि मैं इसे चाहता हूं, सबकुछ खुलता है, लेकिन समस्या पृष्ठभूमि में होती है - यह दृश्यमान (और परेशान) है कि मेरा पूरा पृष्ठ ठीक से 8 पिक्सल सही हो जाता है जब बॉक्स लोड हो जाता है और बॉक्स बंद होने पर सामान्य स्थिति पर वापस आ जाता है।

मैं साइट से लिंक नहीं कर सकता क्योंकि यह हमारी कंपनी फ़ायरवॉल के पीछे एक देव सर्वर पर है।

मैं निम्नलिखित स्क्रिप्ट का उपयोग कर रहा हूं: फैंक्सबॉक्स, क्वाफॉर्म, और jQuery बैनर रोटेटर। रेंटलबॉक्स कॉल रोटेटर के अंदर हो रहा है। मैंने मूल jquery fancybox सीएसएस की किसी भी चौड़ाई/ऊंचाई को संशोधित नहीं किया है।

मेरे पास शरीर की चौड़ाई 100% तक सेट है और मार्जिन ऑटो पर सेट है, और आंतरिक divs 1138px की न्यूनतम चौड़ाई और मार्जिन सेट ऑटो पर सेट है।

क्या किसी को पता है कि मुझे इस मुद्दे को ठीक करने के लिए कहां देखना चाहिए?

Answer 1

मुझे हाल ही में एक ही समस्या थी। fancybox सीएसएस में .fancybox-lock खोजें, और के लिए इसे बदल:

.fancybox-lock { 
    overflow: hidden; 
    margin: 0 !important; 
    } 

देखा! : डी

Answer 2

मेरे पास हाल ही में फैंसीबॉक्स v2 के साथ एक समान स्थिति थी। मेरे शुरुआती पृष्ठ में गुना के नीचे सामग्री थी और इसलिए एक स्क्रॉलबार था (शायद ओपी भी किया था, यह स्पष्ट नहीं है)। फैंक्सबॉक्स लिंक को फायर करने से पेज बॉडी में एक ही बदलाव आया और स्क्रॉलबार को साफ़ किया गया; फैंक्सबॉक्स छवि को बंद करने से शरीर को वापस स्थानांतरित कर दिया गया और स्क्रॉलबार को फिर से सक्षम किया गया।

.fancybox-lock करने के लिए समायोजन मेरे लिए काम नहीं किया था, लेकिन क्या किया निम्नलिखित विकल्प सहित किया गया था जब मेरी Fancybox वस्तु instantiating:

helpers: { 
    overlay: { 
     locked: false 
    } 
} 

केवल चेतावनी है इस पेज के केंद्र के लिए अपने Fancybox लॉक नहीं करता यदि आपके पास स्क्रॉलिंग थी, यानी फ़ैन्सीबॉक्स दृश्य वाला पृष्ठ पूरी तरह से स्क्रॉल करने योग्य है। मेरे लिए, यह दो बुराइयों में से कम था।

Answer 3

संस्करण 2.1.3 में, jquery.fancybox.js में 1802-1807 (नीचे) पंक्तियों पर टिप्पणी करें।

if (!this.overlay) { 

this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false; 

this.el  = document.all && !document.querySelector ? $('html') : $('body'); 

this.create(opts); 

} 

Answer 4

मैं शरीर के लिए, एक तय साथ fancybox v.2.1.4 इस्तेमाल किया केंद्रित पृष्ठभूमि छवि, और मजबूर कर खड़ी स्क्रॉलबार हमेशा दिखाने के लिए।

body{ 
    background: url('../img/sfondo.jpg') fixed center top; 
    overflow-y: scroll; 
} 

स्क्रॉलबार के प्रदर्शन के लिए मजबूर होने के बावजूद, मैं मैक (के बाद से शेर स्क्रॉलबार पेज के अंदर स्थान नहीं लेते क्रोम और सफारी ठीक थे) और यानी पर फ़ायरफ़ॉक्स के साथ पृष्ठभूमि छवि पारी समस्या थी, खिड़कियों पर एफएफ, क्रोम।

तो मैंने देखा है कि अगर मैं मैन्युअल सेट एक्स ऑफसेट बजाय दुनिया के पृष्ठभूमि संपत्ति मुद्दा चला गया था पर केंद्र, तो मैं के प्रमुख में jQuery का एक छोटा साथ यह कामयाब पेज:

<script> 
    function centerTheBackground(){ 
     var pageWidth = $(window).width(); 
     var imageWidth = 1920; //set here the width of the background image 
     var xOffset = (imageWidth/2) - (pageWidth/2); 
     jQuery('body').css('background-position', '-' + xOffset + "px top"); 
    } 


    jQuery(function($){ 
     centerTheBackground(); 
    }); 


    $(window).resize(function() { 
     centerTheBackground(); //re-center the background image during window resizing 
    });    
</script> 

Answer 5

मैं सिर्फ इसे जोड़ने द्वारा हल "margin-सही: ऑटो महत्वपूर्ण" मेरा शरीर तत्व के लिए :) यह नियमों पर Fancyboxes खुद मार्जिन-सही: 0।

Answer 6

यह, यहाँ आप और अधिक जानकारी प्राप्त कर सकते हैं एक ज्ञात समस्या है: issues, fancyapps @ GitHub

मैं Fancybox2 उपयोग कर रहा हूँ (संस्करण 2.1.5)। ओवरले helper'-धारा (लाइन 165 पर शुरू होता है) और दो नियमों को बदलने:

.fancybox-lock { 
/* overflow: hidden !important;*/ 
    overflow-x: hidden !important; 
    overflow-y: scroll !important; 
    width: auto; 
} 

: मैं थोड़ा '

खोजें jquery.fancybox.css'-फ़ाइल' संशोधित करके समस्या को हल कर दिया है

और दूसरा नियम:

.fancybox-lock .fancybox-overlay { 
/* overflow: auto; 
    overflow-y: scroll;*/ 
    overflow: hidden !important; 
} 

यह ठीक पर्याप्त (imho) काम करता है, हालांकि पेज ओवरले के पीछे स्क्रॉल करने योग्य है।

कम से कम परेशान 'स्थानांतरण स्थान' प्रभाव दबा दिया जाता है।

मुझे बाद में पता चला कि तत्व "दाएं: 0;" के साथ स्थित थे ऊर्ध्वाधर स्क्रॉलबार की चौड़ाई से बाईं ओर स्थानांतरित कर दिया गया था।

यह हाशिए-दाएं के अंदर एक शैली-नोड को जोड़कर fancybox.js-code द्वारा मार्जिन-दाएं सेट किया गया है।

समस्या को ठीक करने के लिए jquery.fancybox.js फ़ाइल या jquery.fancybox-2.1.5-pack.js फ़ाइल के अंदर कोड की एक पंक्ति को संशोधित करें, जिसके आधार पर आप उपयोग कर रहे हैं।

पैक संस्करण की लाइन 2017 में

:

$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head"); 

// change it to 

$("<style type='text/css'>.fancybox-margin{margin-right: 0;}</style>").appendTo("head"); 

// perhaps comment out the complete line, I haven't testet it though 

या .pack-फ़ाइल (EOL के पास लाइन 46) में:

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery); 

// change it to: 

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:0;}</style>").appendTo("head")})})(window,document,jQuery); 

// or try to remove the "f().appendTo()"-part completely (untested) 

Answer 7

खैर मैं सिर्फ fancybox सीएसएस में निम्न पंक्ति टिप्पणी की

:

/*.fancybox-lock { 
    overflow: hidden; 
} 
*/ 

और उस पर ठीक से काम करना शुरू कर दिया

• fancybox - jQuery प्लगइन
• संस्करण: 2.1.4 (गुरु, 10 जनवरी 2013)

Answer 8

आप लॉक सुविधा को अक्षम कर सकते हैं:

$(".fancybox").fancybox({ 
    helpers : { 
     overlay : { 
      locked : false 
     } 
    } 
}); 

मेरे लिए काम किया।

Answer 9

यह मेरे लिए यह किया था ...

.fancybox-lock { 
     overflow: hidden !important; 
     padding-right: 17px; 
} 

.fancybox-lock body { 
    overflow: hidden !important; 
} 

Answer 10

आप स्क्रॉलबार के लिए है कि समस्या का सामना कर रहे हैं! बस स्क्रॉलबार चौड़ाई का पता लगाएं और उस चौड़ाई का उपयोग '.fancybox-lock' s 'मार्जिन-दाएं' के रूप में करें। उदाहरण के लिए ,

.fancybox-lock{ 
     margin-right: [your calculated width] !important; 
} 

यह यकीन है कि के लिए अपनी समस्या का समाधान होगा क्योंकि मैं भी एक बार है कि समस्या थी।

Answer 11

यदि आपकी समस्या फेंक्सबॉक्स खुलती है तो तत्वों को कूदने के लिए निश्चित किया जाता है, तो सरल रूप से एक पैडिंग-दाएं जोड़ें: अपने सीएसएस में उन तत्वों के लिए 17px .fancybox-lock class में निहित है।

Answer 12

मैं फैंसी बॉक्स 3 का उपयोग कर रहा हूं और मुझे वही समस्या थी क्योंकि मेरा मुख्य रैपर पूर्ण स्थिति था।

सुनिश्चित करें कि आप रैपर नहीं है और इसे ठीक काम करना चाहिए।