ページ上のjQueryサイクルの複数のインスタンス（および既存のサムネイルをページランチャービルダーでターゲットにする）

StackOverflow https://stackoverflow.com/questions/7818355

  •  26-10-2019
  •  | 
  •  

質問

私はブログで作業するために複数のサイクルのスライドショー（サムネイル付き）を取得しています。...スライドショーサムネイルはすべて、ページ上のスライドショーの最初のインスタンスをターゲットにしています。キャプションはすべてのスライドショーで同じです。

を追加しました var p = this.parentNode しかし、それをオナフターとポケット構造の関数に渡す方法がわかりませんか？

ありがとう ：）

// Setup cm_cycle_slideshow for each div.slideshow
var $ = jQuery.noConflict();
$('.slideshow #main').each(function(){
    var p = this.parentNode;
    $(this).cycle({
        fx:                    'fade',
        speed:                 500,
        before:                onAfter,
        pager:                 $('#thumbs', p),
        pagerAnchorBuilder:    pagerFactory
    }).cycle('pause');
});

function onAfter(curr, next, opts, fwd){
        // Update the slide caption
        $('#caption').html(this.alt);
        // Get the height of the current slide
        var $ht = $(this).height();
        // Set the container's height to that of the current slide
        $(this).parent().css("height", $ht);
}

function pagerFactory(idx, slide) { 
    return '.slideshow #thumbs span:eq(' + idx + ') a'; 
}

そしてHTML ... 

<div class="slideshow">
<div id="main">
<img width="470" height="313" src="blahblahblah.jpg" class="attachment-medium" alt="Camilla Meijer cushions" title="Camilla Meijer cushions" style="position: absolute; top: 0px; left: 0px; z-index: 4; opacity: 0; display: none; ">
<img width="470" height="313" src="blahblahblah.jpg" class="attachment-medium" alt="Camilla Meijer cushions" title="Camilla Meijer cushions" style="position: absolute; top: 0px; left: 0px; z-index: 4; opacity: 0; display: none; ">
<img width="470" height="313" src="blahblahblah.jpg" class="attachment-medium" alt="Camilla Meijer cushions" title="Camilla Meijer cushions" style="position: absolute; top: 0px; left: 0px; z-index: 4; opacity: 0; display: none; ">
</div>
<div id="thumbs">
<span class=""><a href="#"><img width="74" height="74" src="blahblahblah.jpg" class="attachment-shop_thumbnail" alt="Caption here"></a></span>
<span class=""><a href="#"><img width="74" height="74" src="blahblahblah.jpg" class="attachment-shop_thumbnail" alt="Caption here"></a></span>
<span class=""><a href="#"><img width="74" height="74" src="blahblahblah.jpg" class="attachment-shop_thumbnail" alt="Caption here"></a></span>
<div id="caption">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing.</div>
</div>
</div>
役に立ちましたか？

解決

各スライドショーのアイデンティティにカウンターを作成します（また、IDをクラスに変更します！）

// Setup cm_cycle_slideshow for each div.slideshow
var $ = jQuery.noConflict();
var counter = 1;
$('.slideshow .main').each(function(){
    $(this).parent().attr('id','slideshow_'+counter);
    var p = $(this).parent();
    $(this).cycle({
        element: counter, 
        fx:                    'fade',
        speed:                 500,
        before:                onAfter,
        pager:                 $('.thumbs', p),
        pagerAnchorBuilder:    function (idx, slide) {
            //console.log('#slideshow_'+counter+' .thumbs span:eq(' + idx + ') a')
            return '#slideshow_'+counter+' .thumbs span:eq(' + idx + ') a'; 
        }
    }).cycle('pause');
    counter++;
});

function onAfter(curr, next, opts, fwd){
        // Update the slide caption
        $('#slideshow_'+opts.element+' .caption').html(next.alt);
        // Get the height of the current slide
        var $ht = $(this).height();
        // Set the container's height to that of the current slide
        $(this).parent().css("height", $ht);
}

他のヒント

おそらく、ページ上の複数の重複IDの問題です。

私はちょうどPageanChorbuilderのことをスキップしました。それは面倒な方法であり、非常に限られたコントロールを提供します。これははるかに良い選択肢です。

最初にサイクルステージとこのような親指トレイを構築します。これで、親指をはるかにコントロールできます。

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

次に、このJSを使用して、サムネイルをスライドにリンクします。基本的に、サム1はスライド1などにリンクします。

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage on click
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

これは、ページ上の複数のサイクルギャラリーで問題なく動作します！さらに、上記の答えよりもはるかに簡単です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top