fancybox2/fancybox पृष्ठ को शीर्ष पर जाने के लिए

Question

मैंने एक dev साइट पर fancybox2 लागू किया है।

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

क्या किसी ने इसका अनुभव किया है?

Answer 1

यह वास्तव में Fancybox में एक सहायक के साथ किया जा सकता 2.

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

http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

Answer 2

समस्या यह है कि ब्राउज़र स्क्रॉलबार को छिपाने के लिए फैंसीबॉक्स शरीर के अतिप्रवाह मूल्य को बदलता है। मुझे इस व्यवहार को टॉगल करने का विकल्प नहीं मिला।

आप fancybox कोड के इस भाग को दूर कर सकता है यह को रोकने के लिए:

if (obj.locked) { 
    this.el.addClass('fancybox-lock'); 

    if (this.margin !== false) { 
     $('body').css('margin-right', getScalar(this.margin) + obj.scrollbarWidth); 
    } 
} 

Answer 3

Jordanj77 है सही लेकिन आसान समाधान केवल स्टाइलशीट jquery.fancybox.css पर जाना है औरमें overflow: hidden !important; कहने वाली पंक्ति पर टिप्पणी करें jquery.fancybox.css में

.fancybox-lock में

overflow: hidden !important; 

शरीर:

Answer 4

मैं के साथ यह तय हो गई। और स्क्रॉलबार कूद नहीं :)

Answer 5

हो सकता है कि इस उत्तर alil देर हो चुकी है, लेकिन शायद यह भविष्य में मदद कर सकता है अगर clicling के बाद/एक छवि fancybox बंद करने शीर्ष करने के लिए अपनी वेबसाइट स्क्रॉल करता है, तो आप सिर्फ हटा सकता है:

F.trigger('onReady'); 

या बेहतर उपयोग:

/*F.trigger('onReady');*/ 

fancybox संस्करण में: 2.1.5 (शुक्र, 14 जून 2013) कोड का वह हिस्सा लाइन पर है 897.

Answer 6

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

डेव चुंबन बताते हैं, हम निम्न पैरामीटर जोड़कर ऐसा करने से फैंसी बॉक्स बंद कर सकते हैं:

$('.image').fancybox({ 
    padding: 0, 
    helpers: { 
    overlay: { 
     locked: false 
    } 
    } 
}); 

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

हम अगले पैरामीटर जोड़कर सही तरीके से स्क्रॉल रोका जा सकता है:

$('.image').fancybox({ 
     padding: 0, 
     helpers: { 
     overlay: { 
      locked: false 
     } 
     }, 
    'beforeLoad': function(){ 
     disable_scroll(); 
     }, 
    'afterClose': function(){ 
     enable_scroll(); 
     } 
    }); 

और galambalaz से इन कार्यों को जोड़ने।देखें: How to disable scrolling temporarily?

var keys = [37, 38, 39, 40]; 

    function preventDefault(e) { 
     e = e || window.event; 
     if (e.preventDefault) e.preventDefault(); 
     e.returnValue = false; 
    } 

    function keydown(e) { 
     for (var i = keys.length; i--;) { 
      if (e.keyCode === keys[i]) { 
       preventDefault(e); 
       return; 
      } 
     } 
    } 

    function wheel(e) { 
     preventDefault(e); 
    } 

    function disable_scroll() { 
     if (window.addEventListener) { 
      window.addEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = wheel; 
     document.onkeydown = keydown; 
    } 

    function enable_scroll() { 
     if (window.removeEventListener) { 
      window.removeEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
    } 

Answer 7

यह भी मदद की

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

Answer 8

तथ्य के बावजूद, कि इस समस्या के हल के लिए उचित तरीके से विकल्प है, जो fancybox प्रदान करता है (refer to this answer) के माध्यम से है, सीएसएस हल करने के लिए इस्तेमाल किया जा सकता समस्या। पुस्तकालय के सीएसएस फ़ाइल को संपादित करने की कोई जरूरत है, सिर्फ अनुप्रयोग का मुख्य स्टाइलशीट से जोड़ें:

html.fancybox-lock { 
    overflow: visible !important; 
} 

कोड तत्व की मूल अतिप्रवाह रीसेट करता है। समस्या यह है कि overflow: hidden;<html> तत्व पर स्क्रॉलबार को छुपाता है, जिससे पृष्ठ शीर्ष पर "कूद" का कारण बनता है। आदेश स्क्रॉलबार की स्थिति बनाए रखने के लिए, हम overflow: visible;

Answer 9

आप वास्तव में आप fancybox डिफ़ॉल्ट समारोह उपयोग कर रहे हैं इस तरह कोड कर सकते हैं के साथ अतिप्रवाह के ऊपर लिख:

$(document).ready(function() { 
     $(".fancybox").fancybox({ 
      padding: 0, 
      helpers: { 
       overlay: { 
        locked: false 
       } 
      } 
     }); 
    }); 

Answer 10

स्वीकार किए जाते हैं जवाब पूरा के रूप में ऐसा नहीं होता है वास्तव में समस्या को हल नहीं करते हैं, यह सिर्फ इससे बचाता है!

 $('.fancybox').fancybox({ 
      helpers: { 
       overlay: { 
        locked: false 
       } 
      }, 
      beforeShow:function(){ 
       $('html').css('overflowX', 'visible'); 
       $('body').css('overflowY', 'hidden'); 
      }, 
      afterClose:function(){ 
       $('html').css('overflowX', 'hidden'); 
       $('body').css('overflowY', 'visible'); 
      } 
     });