وقفة فليكسليدر عندما تراكب مفتوح

Question

ونحن نعمل حاليا على المشروع الذي يستخدم البرنامج المساعد فليكسليدر (المكتسبة مؤخرا من قبل وو ثيمات).لدينا العديد من النوافذ المنبثقة في هذه الصفحة ونريد أن يتوقف شريط التمرير مؤقتا عندما تكون النوافذ المنبثقة نشطة ويستأنف عند إغلاق النوافذ المنبثقة.وقفة يعمل فقط أول الذهاب ' جولة واستئناف المنزلق لا يعمل.يوجد أدناه الرمز الذي نستخدمه في شريط التمرير.لقد حاولت تبديل وظيفة" ابدأ "مع جميع المكالمات المتاحة باستثناء مكالمة" إنهاء".

$w('#slider-frame').flexslider({
        animation: 'fade',
        directionNav: false,
        slideshowSpeed: 4000,
        controlNav: true,
        pauseOnHover: true,
        manualControls: '#indicator-dots li',
        start: function(slider){

            $w('.roi-click').click(function(){
                slider.trigger('mouseenter');
            });

            $w('div#ovrly, a#close').click(function(){
                slider.trigger('mouseleave');
            });

        }
    });

الرابط إلى الصفحة هو http://www.whitehardt.com/sandbox/whitehardt-v3.

أي مساعدة في هذا سيكون موضع تقدير كبير.

Answer 1

تحرير

أعتقد أنني اكتشفت ما يجري هنا.المشكلة هي أن لديك أحداث متضاربة مستمرة.

1. فليكسليدر يبدأ الرسوم المتحركة عن طريق القيام setInterval وتخزين معرف الفاصل الزمني في متغير حالة داخلي (slider.animatedSlides).
2. فليكسليدر مؤقتا عند تحوم فوق الشريحة.يقوم بذلك عن طريق مسح الفاصل الزمني للرسوم المتحركة باستخدام clearInterval().
3. النقر فوق roi اربط الشريحة ، التي تتوقف مؤقتا مرة أخرى ، عن طريق مسح ما هو الآن فاصل زمني غير موجود.
4. تحتوي الصفحة على تراكب عليها ، مما يعني أنك تقوم بعمل ملف mouseleave على فليكسليدر ، لذلك يبدأ الرسوم المتحركة مرة أخرى مع setInterval() ويخزن معرف الفاصل الزمني.
5. يمكنك إغلاق التراكب ، بالنقر فوق الزر إغلاق أو التراكب ، وعند هذه النقطة تتصل resume(), ، والذي يقوم أيضا بـ setInterval(), ، الكتابة فوق معرف الفاصل الزمني المخزن.لذا, الآن لديك اثنين من الرسوم المتحركة الذهاب, ، ومن هنا جاءت السرعة المزدوجة. زائد, في المرة القادمة التي تتصل فيها pause(), ، لديه حق الوصول فقط لمسح الفاصل الزمني الأخير الذي قمت بتعيينه لأنه تجاوز المعرف المخزن.لذلك ، لم يعد بإمكانك مسح الفاصل الزمني من الخطوة 3.لذلك ، سوف تذهب بين وجود الرسوم المتحركة فاصل واحد الذهاب (بطيئة) ، عند mouseenter واثنان عندما mouseleave (سريع).

بدلا من التوقف عند النقر ، يمكنك التوقف مؤقتا #ovrly تمرير الماوس ، واستئناف عند النقر ، لأن الماوس الخروج من فليكسليدر قبل تمرير الماوس من تراكب.

$w('#slider-frame').flexslider({
    animation: 'fade',
    directionNav: false,
    slideshowSpeed: 4000,
    controlNav: true,
    pauseOnHover: true,
    manualControls: '#indicator-dots li',
    start: function(slider){
        $w('div#ovrly').mouseover(function(){
            slider.pause();
        });
        $w('div#ovrly, a#close').click(function() {
            slider.resume();
        });
    }
});

لكن, ، قد تواجه مشكلات مماثلة ، اعتمادا على ما إذا كان الماوس فوق شريط التمرير أم لا عند إغلاق التراكب...لكنني لست متأكدا.من الناحية المثالية ، فليكسليدر لن تبدأ الرسوم المتحركة الجديدة إذا كان واحد بالفعل الذهاب.هل يمكن أن الإختراق هذا في فليكسليدر.شبيبة:

//FlexSlider: Automatic Slideshow Pause
slider.pause = function() {
  // Only pause if running
  if(slider.animatedSlides == null) {
      return;
  }

  clearInterval(slider.animatedSlides);

  // Clear the interval ID
  slider.animatedSlides = null;

  if (slider.vars.pausePlay) {
    slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
  }
}

//FlexSlider: Automatic Slideshow Start/Resume
slider.resume = function() {
  // Only resume if paused
  if(slider.animatedSlides != null) {
      return;
  }
  slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
  if (slider.vars.pausePlay) {
    slider.pausePlay.removeClass('play').addClass('pause').text(slider.vars.pauseText);
  }
}

هل يمكن أن تفرط هذه الوظائف في الخاص بك start: وظيفة المعلمة.

سيؤدي هذا التغيير إلى حل السرعة وحقيقة أنه لا يمكنك التوقف مرة أخرى.ستظل تواجه مشكلة استئناف شريط التمرير عندما ينبثق التراكب الخاص بك.هذا يمكن حلها مع mouseover الحل الذي ذكرته من قبل.

هنا هو كمان أن يظهر mouseover الحل: http://jsfiddle.net/jtbowden/TWN5t/

يبدو كما لو أنك قد لا تحتاج إلى الاختراق الثاني ، على الرغم من أنه رمز أفضل.

Answer 2

jeff b، شكرا على إصلاح JS.نظرا لأنه لا يعمل مع فرع 2.x من FlexSlider، أعتقد أنه فقط مقابل 1.x

لأولئك الموجودين على 2.x، تم تقديم إصلاح بواسطة NVartolomei: https://github.com/woothemes/flexslider/pull/322

Answer 3

واجهت نفس المشكلة التي تعمل مع brightcove + flexslider. هنا الحل الخاص بي:

قبل giveacodicetagpre.

ثم giveacodicetagpre.

pauseplayplay .flex لعب CSS العتامة: 0