fancybox2 / fancybox পৃষ্ঠায় শীর্ষে উঠে আসে

Question

আমি একটি ডেভ সাইটে অভিনব বাক্স 2 প্রয়োগ করেছি।

আমি যখন অভিনব বাক্সটি যুক্ত করি (লিঙ্ক ইত্যাদি ক্লিক করুন) পুরো পেছনে এইচটিএমএল স্থানান্তরিত হয় - এবং শীর্ষে যায়। আমার এটি অন্য ডেমোতে কাজ করছে, তবে আমি যখন এই কোডটিতে একই কোডটি টেনে আনি তখন এটি শীর্ষে চলে যায়। কেবল ইনলাইন ডিভগুলির লিঙ্কগুলিই নয়, সাধারণ চিত্র গ্যালারীটির জন্যও।

কেউ কি এই অভিজ্ঞতা আছে?

Comments

দ্রষ্টব্য: আমি কেবলমাত্র একটি আইফোন আইপ্যাডে এটি পরীক্ষা করেছি এবং এই সমস্যা দেখা দিচ্ছে না ... তবে এটি ক্রোম এবং ফায়ারফক্সে রয়েছে।

— শেরিফডেরেক

আপনি যদি ফ্যান্সিবক্স v2.1.5 ব্যবহার করেন তবে মনে হয় সমস্যাটি সর্বশেষতম মাস্টারে স্থির হয়েছে যা আপনি এখানে ফর্মটি ডাউনলোড করতে পারবেন github.com/fancyapps/fancyBox/archive/master.zip সুতরাং জেএস বা সিএসএস ফাইলগুলির আর কোনও হ্যাক নেই cks ।

— জেএফকে

Answer 1

এটি আসলে ফ্যানসি বক্স 2-এ সাহায্যকারী দিয়ে করা যেতে পারে।

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

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

Comments

এটি অবশ্যই এটি করার উপায়। এটিকে স্বীকৃত উত্তর হিসাবে চিহ্নিত করুন। এই জন্য আপনাকে ধন্যবাদ!

— সিএফএক্স

সম্পূর্ণ একমত. গৃহীত উত্তর (অভিনব বাক্স 2 থেকে কোড সরানোর জন্য) একটি হ্যাক।

— রব গঞ্জালেজ

এটি দুর্ভাগ্যক্রমে গৃহীত উত্তর পুরো এক বছরে পরিবর্তন করা হয়নি। আশা করি ভবিষ্যতের ব্যবহারকারীরা এটি "প্লাগইন থেকে চপ কোড আউট" উত্তরটি প্রয়োগ করবেন না।

— অ্যান্ডি ওয়ারেন 14

আমি মনে করি এই উত্তরটি সমস্যার সমাধান করে না। অনেক লোক ফ্যান্সিবক্সের পিছনে থাকা সামগ্রীগুলি স্ক্রোল করতে সক্ষম হতে পছন্দ করতে পারে না ( lockedএটি সেট করা থাকলে কী হবে false)) এটি কোনও সমস্যার জন্য সাময়িকভাবে কাজ করে যা কিছু পরিস্থিতির জন্য অন্যটি তৈরি করতে পারে। এটি একটি বাগ ছিল এবং এটি সর্বশেষতম মাস্টার github.com/fancyapps/fancyBox/archive/master.zip

— JFK

@ জেএফকে আমি সম্মত হলাম যে স্ক্রোলিংয়ের কারণে এই সংশোধনটি আসলে আদর্শ নাও হতে পারে তবে আমি এটি সর্বশেষতম মাস্টার দিয়ে পরীক্ষা করেছি এবং পৃষ্ঠাটি এখনও শীর্ষে চলে যায়। ফেন্সিবক্স যদিও বন্ধ থাকলে এটি আসল অবস্থানে ফিরে যায়।

— মিঃ জনি উড

Answer 2

জর্দানজ correct correct সঠিক তবে সহজ সমাধান হ'ল কেবল স্টাইলশিটে যান এবং বিভাগটিতে jquery.fancybox.cssসারিটি বলে মন্তব্য করাoverflow: hidden !important;.fancybox-lock

Comments

এটি হেল্পার ব্যবহারের চেয়ে ভাল কারণ হেল্পারের সাহায্যে পৃষ্ঠাটি মাউস হুইল দিয়ে ওভারলেটির নীচে স্ক্রল করতে থাকে। ওভারফ্লো সম্পর্কে মন্তব্য করা এড়াতে বাধা দেয় তবে স্ক্রোলবারটি এখনও মূল পৃষ্ঠার জন্য লক করা আছে।

— পানামা জ্যাক

Answer 3

আমি বুঝতে পারি এটি একটি পুরানো প্রশ্ন, তবে আমি মনে করি এটির জন্য আমি একটি ভাল সমাধান খুঁজে পেয়েছি। সমস্যাটি হ'ল অভিনব বাক্স ব্রাউজারের স্ক্রোলবারগুলি লুকানোর জন্য শরীরের ওভারফ্লো মানকে পরিবর্তন করে।

ডেভ কিস হিসাবে উল্লেখ করা হয়েছে, আমরা নিম্নলিখিত প্যারামিটারগুলি যুক্ত করে অভিনব বাক্সটিকে এটি করা থেকে বিরত করতে পারি:

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

তবে, এখন আমাদের অভিনব বাক্স উইন্ডোটি দেখার সময় আমরা মূল পৃষ্ঠাটি স্ক্রোল করতে পারি। পৃষ্ঠার শীর্ষে ঝাঁপিয়ে পড়ার চেয়ে এটি ভাল তবে আমরা সম্ভবত যা চাই তা সম্ভবত এটি নয়।

আমরা পরবর্তী প্যারামিটারগুলি যুক্ত করে সঠিক উপায়ে স্ক্রোলিং প্রতিরোধ করতে পারি:

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

এবং গালামবালাজ থেকে এই ফাংশনগুলি যুক্ত করুন। দেখুন: কীভাবে অস্থায়ীভাবে স্ক্রোলিং অক্ষম করবেন?

    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 4

সমস্যাটি হ'ল ফ্যান্সিবক্স ব্রাউজারের স্ক্রোলবারগুলি লুকানোর জন্য শরীরের ওভারফ্লো মানকে পরিবর্তন করে। আমি এই আচরণটি টগল করার কোনও বিকল্প খুঁজে পাইনি।

আপনি এটিকে প্রতিরোধের জন্য অভিনববক্স কোডটির এই বিভাগটি সরিয়ে ফেলতে পারেন:

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

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

Comments

হ্যাঁ! এই কারণেই আমার পৃষ্ঠাটি তখন 20 বর্গ বামে লাফিয়ে চলেছিল। ধন্যবাদ! আপনি আমার 2 টি সমস্যা সমাধান করেছেন!

— শেরিফডেরেক

স্ক্রোল বারগুলি সেখানে রয়েছে ... তবে আমি সর্বদা ওভারফ্লো-ওয়াই: স্ক্রোল ব্যবহার করি; যাইহোক, সুতরাং এটি আমার পক্ষে একটি সুষ্ঠু বাণিজ্য।

— শেরিফডেরেক

আমার ধারণা যে এটি মাউস-হুইল কার্যকারিতা ব্লক করবে - আমি অন্যান্য সমাধানগুলিও অনুসন্ধান করতে থাকব। তবে আমি যেমন বলেছিলাম, এটি আপাতত কৌশলটি করছে!

— শেরিফডেরেক

আপনি যদি ফ্যান্সিবক্স v2.1.5 ব্যবহার করেন তবে মনে হয় সমস্যাটি সর্বশেষতম মাস্টারে স্থির হয়েছে যা আপনি এখানে ফর্মটি ডাউনলোড করতে পারবেন github.com/fancyapps/fancyBox/archive/master.zip সুতরাং জেএস বা সিএসএস ফাইলগুলির আর কোনও হ্যাক নেই cks ।

— জেএফকে

এটি তখনকার সেরা উত্তর ছিল ... এবং যদি কোনও কারণে আপনার কোনও উত্তরাধিকারের সাইট বা কিছু থাকে --- এটিকে কিছু রেফারেন্স হিসাবে দেখুন।

— শেরিফডেরেক

Answer 5

এই সমস্যাটি সমাধানের যথাযথ উপায়টি সত্ত্বেও, যেটি ফ্যান্সিবক্স সরবরাহ করে ( এই উত্তরটি দেখুন ), সমস্যার সমাধান করার জন্য সিএসএস ব্যবহার করা যেতে পারে। লাইব্রেরির সিএসএস ফাইল সম্পাদনা করার দরকার নেই, কেবলমাত্র অ্যাপ্লিকেশনটির মূল স্টাইলশিটে এটি যুক্ত করুন:

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

কোডটি উপাদানটির মূল ওভারফ্লোটি পুনরায় সেট করে। সমস্যা হল যেoverflow: hidden;<html> উপাদানটির স্ক্রোলবারটি আড়াল করে , যার ফলে পৃষ্ঠার শীর্ষে "লাফ" পড়ে। স্ক্রোলবারের অবস্থান সংরক্ষণ করার জন্য, আমরা ওভারফ্লোটি ওভাররাইট দিয়েoverflow: visible;

Comments

এটি হওয়ার কারণের আরেকটি কারণ হ'ল <body>বা / এবং <html>হতে পারেheight: 100%

— 21

Answer 6

এটিও সাহায্য করেছিল

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

Comments

ওভার রাইটিং তৃতীয় পক্ষের শৈলীগুলি একটি ভাল ধারণা নয় বিশেষত যদি আপনাকে ক্যাসকেড ভাঙতে একটি গুরুত্বপূর্ণ মডিফায়ার ব্যবহার করতে হয়। আমি সবাইকে উপরের ডেভ কিস দ্বারা প্রদত্ত ফিক্সটি ব্যবহার করতে উত্সাহিত করছি, এটি নয়।

— ফ্যাবিয়ান শ্যনার

Answer 7

গৃহীত উত্তর সম্পূর্ণ হয় না কারণ এটি আসলে সমস্যার সমাধান করে না কারণ এটি কেবল এড়িয়ে চলে! উইন্ডো জাম্প ইস্যুটি ঠিক করার সময় এটি আরও সম্পূর্ণ উত্তর যা প্রকৃতপক্ষে আপনাকে পছন্দসই কার্যকারিতা দেয়:

        $('.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'); 
            }
        });

Answer 8

হতে পারে এই উত্তরটি দেরিতে হয়েছে তবে সম্ভবত এটি ভবিষ্যতে সহায়তা করতে পারে, যদি কোনও ছবিতে ক্লিক / বন্ধ করার পরে কোনও ফ্যান্সিবক্স আপনার ওয়েবসাইটটিকে শীর্ষে স্ক্রোল করে তোলে, আপনি কেবল মুছে ফেলতে পারেন:

F.trigger('onReady');

বা আরও ভাল ব্যবহার:

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

ফ্যান্সিবক্স সংস্করণে: ২.১.৫ (শুক্র, ১৪ জুন ২০১৩) কোডটির সেই অংশটি 897 লাইনে রয়েছে।

Answer 9

আপনি যদি ফ্যান্সিবক্স ডিফল্ট ফাংশন ব্যবহার করে থাকেন তবে আপনি আসলে এর মতো কোড করতে পারেন:

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

Answer 10

আমি এটি দিয়ে স্থির করেছি:

overflow: hidden !important; 

মধ্যে .fancybox-lockশরীরে jquery.fancybox.css। এবং স্ক্রোলবার লাফ দিচ্ছে না :)

Comments

প্রায় এক মাস আগে ফাস্ট-রেফ্লেক্সেস এটাই বলেছিল।

— BoltClock