3

jQuery Cycleプラグインを使用して、非常に単純なスライドショーを作成しています。

マークアップ：

<div class="gallery group">

    <div class="slide-nav">
        <a href="#" class="previous">&laquo; Ver anterior</a>
        <a href="#" class="view">Ver Ficha</a>
        <a href="#" class="next">Ver siguiente &raquo;</a>
    </div><!-- /slide-nav -->

    <div class="slider">

        <div class="slides">
            <img src="img/gallery01.jpg" alt="" />
            <img src="img/gallery02.jpg" alt="" />
            <img src="img/gallery01.jpg" alt="" />
            <img src="img/gallery02.jpg" alt="" />
        </div>

        <div class="thumbs"></div>

    </div><!-- /slider -->

</div><!-- /gallery -->

脚本：

jQuery('.gallery .slider .slides').cycle({ 
    fx:     'fade', 
    speed:  '800', 
    timeout: 3000, 
    prev:   '.gallery .slide-nav a.previous',
    next:   '.gallery .slide-nav a.next',
    pager:  '.gallery .slider .thumbs',

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) {
        var img = jQuery(slide).find("img").attr("src");
        return '<a href="#"><img src="' + img + '" /></a>';
    } 
});

pagerAnchorBuilderpager（.thumbs私の例では）にサムネイルを作成する関数です。サムネイルはで作成され、スライド（私の場合は画像）のラッパーであるという考え方.thumbsです.slides。

ただし、これはコンソールのログに記録されます（エラーや警告ではなく、ログに記録するだけです）。

[サイクル]1-imgスライドがロードされていません、スライドショーを再キューイングしています：gallery01.jpg 0 0

スライドショーは引き続き機能しますが、サムネイルは作成されずimg、関数の変数pagerAnchorBuilderが未定義であることがわかります。

「キューイングスライドショー」の意味と、画像が未定義である理由について何か考えはありますか？私は過去にこの正確なスニペットを何度も使用しましたが、これまでこの問題が発生したことはありません。

4

1 に答える 1

2

ふーむ ...

    var img = jQuery(slide).find("img").attr("src");

「pagerAnchorBuilder」コールバックに渡された「slide」が<img>「slides」の要素の1つになる<div>場合は、「find（）」は必要ありません。それはちょうどあるべきです：

    var img = jQuery(slide).attr('src');

または、より単純な：

    var img = slide.src;

「.find（）」メソッドに開始要素が含まれることはありません。DOMの子孫のみを調べます。

于 2011-02-28T16:49:39.393 に答える