jQueryのサイクルpagerAnchorBuilder

Question

を使用しているサイクルのプラグインを使用したニュース-ローテータ.これは私が使っている部門の移植にはスライドでのイメージ画像です。

私の研究の究極的な目標は、ページャーが通常1,2,3,4。-してあげてくださを返します最初のH3タグをスライドを出します。

こしょう少し選択問題ですが、ここでは、私が使っているか

$('#scroll_wrap').cycle({
        fx: 'fade',
        pager: '#pager',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li><a href="#">' + slide.children("h3").textContent + '</a></li>';
        }

このようなこと:

    $('#scroll_wrap').cycle({
    fx: 'fade',
    pager: '#pager',
    pagerAnchorBuilder: function(idx, slide) { 
            var h3 = $('div',slide).children('h3');
            return '<li><a href="#">' + slide.h3 + '</a></li>';
    }

としてできるのではないでしょうかいのに、まだ駆け出し.:/

誰でもできるので教えてくれるので助かりますのseleciton??

Answer 1

変更はオンライン上でお客様pagerAnchorBuilder機能のこと:

return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';

三く変更される:

スライド=>jQuery（スライド）
でjQueryい要素とそのヘルパーの機能のない限りしないといけないと考えています。これは不幸な結果のjQueryませんのプロトタイプを先住民のような要素).これまでラップ毎に第三にもコードとjQuery(x)を実現しました。

子ども("h3")=>子ども("h3").eq(0)
でセレクタを返し配列のオブジェ合、必ず掴むのだけをセレクタの他、以下のメソッドの呼び出しのチェーンに関する法律の要素の集まりです。Jqueryを示したものです。firstChild("h3").

textContent=>.テキスト)
textContentはmozillaでは、このような背景の下で、ポ作業の一部のブラウザを推奨いたします。JQueryを使う。テキスト()メソッドです。この場合には、jQueryかったのも間違っています。

Answer 2

私はこれを試みたが、働いているます：

$(function() {
$('#featured .container').before('<ul id="nav">').cycle({
    fx: 'scrollLeft',
    speed: 300,
    timeout: 5000, 
    next: '.next',
    prev: '.previous',
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children('.thumb').children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="50" height="50" /></a></li>';
    }


});

Sougata

Answer 3

これは任意のDOM要素に検索するためのソリューションがあります：

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

Answer 4

この質問は、高ランクとして起動しますので、

私は、これを掲示しています。私は私の解決策は、はるかに堅牢だと思います。

私は何も空想を行うため面倒に、全体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);
});

これは、複数のサイクルギャラリーのページにあまりにも動作します。スライドは、画像である必要はありません覚えておいてください。彼らは、ステージは、このように構築することができます：

    <div class="stage">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>