أصبحت صور البرنامج المساعد لـ jQuery Cycle PagerAnchorBuilder غير محددة

Question

لدي عرض شرائح مدمج بالفلاش وأريد تقليده في jQuery.يستخدم عرض الشرائح الصور من عرض الشرائح كأرقام النداء.المشكلة التي أواجهها هي أنه بمجرد تطبيق الروابط على صور عرض الشرائح، تقوم صورة pagerAnchorBuilder بإرجاع قيمة غير محددة لـ src الخاص بالصورة.

جافا سكريبت -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + slide.src + '" width="100" height="60" /></a></li>';
    }
});  
});

لغة البرمجة -

<div id="slideshow" class="pics"> 
    <a href="http://google.com"><img src="home_1.jpg" width="1000" height="600" /></a>
    <a href="http://google.com"><img src="home_2.jpg" width="1000" height="600" /></a>
    <a href="http://google.com"><img src="home_3.jpg" width="1000" height="600" /></a> 
    <a href="http://google.com"><img src="home_4.jpg" width="1000" height="600" /></a> 
    <a href="http://google.com"><img src="home_5.jpg" width="1000" height="600" /></a> 

</div> 

إذا قمت بإزالة href من عرض الشرائح، فستظهر الصور الموجودة في جهاز النداء دون مشاكل.لست متأكدًا مما إذا كان هذا خطأ أو شيئًا أحتاج إلى إيجاد حل له؟

هنا الجواب -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="100" height="60" /></a></li>';
    }

});

});

Answer 1

اقرأ هذا قد يساعدك!

دورة jQuery pagerAnchorBuilder

Answer 2

إستعملت JQuery.find() للمساعدة في العثور على الصور، والاحتفاظ بالكود المعياري بما يكفي لاستخدامه مع علامات مختلفة:

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="'
        + jQuery(slide).find('img').attr('src')
        + '" width="120" /></a></li>'; 
}

Answer 3

بالإشارة إلى تعليق JVerstry (جميل JV راجع للشغل!) ، حصلت على ما يلي بشكل جيد والذي يستخدم الصورة و <a>وصلة.كما تُظهر إبهام النداء أيضًا السمة البديلة للصورة الرئيسية:

return '<li class="slider-thumb"><a href="'+slide.href+'" id="pager-click" title="'+slide.title+'"><img src="'+ $(slide).find('img').attr('src')+'" width="90" height="69" class="fader" /></a><p class="slide-caption">'+ $(slide).find('img').attr('alt')+'</p></li>';

Answer 4

يبدو أن هناك مشكلة مشتركة!الدفع دورة مع المراسي وأيضا "slideExpr" للدورة