أسئلة JQUERY دورة الأسئلة: وقفة على تحميل + تحريك

Question

يا شباب، وبناء موقع ولدي سؤالين لك. يتم استضاف الموقع هنا في الوقت الحالي: http://wesbos.com/tf/shutterflow/؟cat=5. .

لدي سؤالان:

1. حاليا شرائح الشرائح تدور Divs مع فئة. بطل تحمل الصورة. داخلها، فئة من .cover تراهزه مع البيانات / خلفية شبه شفافة قد انتهت.

إذا جربت هذا، فهذا يتم تحميله بشكل جيد (بسبب شاشة CSS: لا شيء على .cover) ولكن عندما أقوم بالنقر فوق صورة مصغرة يقوم بتحميل كل من Divs، وليس تطبيق العرض: لا شيء إلى .cover DIV. يتلاشى فقط عندما أحرز. أنا أستخدم دورة JQuery والرمز الخاص بي يشبه هذا: (موجود في Shutterflow.js)

$(document).ready(function() {
$('#slideshow').cycle({
    fx:     'fade', 
next:   '#next', 
    pause: 1,
prev:   '#prev',
    pause:  '#pause',
    pager:  '.thumbs',
    pagerAnchorBuilder: function(idx, slide) {
                    var src = $('img',slide).attr('src');
                    return '<li><a href="#"><img src="' + src + '"  height="75" /></a></li>';
            } 
});

و

        $(document).ready(      
              function() {
                $('.slide').hover(
                  function() {  $(".cover").fadeIn('500'); },
                  function () { $(".cover").fadeOut('500');
                 }  );
        }  );

كيف يمكنني الحصول على .Cover لتحميل كقسم عرض: لا شيء عند النقر فوق الصورة المصغرة؟


2. سؤالي الثاني يجب أن يكون سهلا جدا. بالنظر إلى المقتطف أعلاه، أريد تحميل عرض الشرائح في حالة متوقفة مؤقتا وإجراء فقط عند النقر فوق ارتباط التشغيل.

Answer 1

تحرير: إضافة إجابة للحصول على السؤال الأول.

السؤال الأول: أضف خيار PagerClick لوظيفة الدورة.

pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();}

السؤال الثاني يبدو سهل: بناء على البرنامج المساعد Doc.:

على افتراض أن لديك مسرحية / إيقاف مؤقت BTN

btnplaypause.toggle (وظيفة () {$ ("# عرض الشرائح"). دورة ("إيقاف مؤقت")؛}، وظيفة () {$ ("# عرض الشرائح .cycle (" استئناف ")؛}

يمكنك أيضا تغيير صورة الزر Play / Pause في تلك الوظائف. انظر أيضا هنا