同じページの複数のjQueryサイクルインスタンスの複数のポケット器？

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

  •  27-09-2019
  •  | 
  •  

質問

私は、新しいクラスを手動で作成することなく、それらを参照するスクリプトを手動で作成することなく、同じページにある複数のjQueryサイクルスライドショーに関連付けられている複数のページをどのように持つことができるかを理解しようとしています。

私のHTMLはこのように見えます。

<!-- PROJECT -->
        <div title="Challenge Factor" class="project">

          <div class="projectinfo-top">
                <div class="project-title"><h2>Challenge Factor</h2></div>
                <div class="bulletnav"></div>
          </div>

            <div class="minislideshow-bg">
                <div class="minislideshow">
                  <img src="project-slides/challengefactor-1.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-2.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-3.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-4.jpg" width="729" height="425" alt="Challenge Factor" />
                </div>
            </div>

            <div class="projectinfo-text">

                <p>ChallengeFactor.com is a new social network based on user created challenges that push members to better themselves and the lives around them. Webphibian was contacted to develop the social network from scratch and tie it into Challenge Factor's current branding. My role on this project was to design the social network side of the site, redesign their current site, and all front-end development.</p>
            </div><!--/project info text-->

        </div><!--/PROJECT-->

私のjQueryはどのように見えますか。

$(function() { $('.minislideshow').cycle({ timeout: 0, pager:'.bulletnav' }); });

私には複数のプロジェクトがリストされており、それぞれに独自のスライドショー、div.minislideshowがあります。各プロジェクトインスタンスのdiv.bulletnav内にポケットベルリンクを入力してもらいたいと思います。

どんな助けも大歓迎です。詳細が必要な場合は、お知らせください。ありがとう。

役に立ちましたか？

解決

私はこれが本当に役立つと思いました：

http://forum.jquery.com/topic/jquery-cycle-plugin-set-multiple-containers-with-same-options

基本的に、彼らは各スライドショーに対して.each（）を実行しています。その後、次のように、親ノードを関連するリンクに渡しています。

$('section.portfolioItem .image').each(function(){
    var p = this.parentNode;
    $(this).cycle({
      timeout:  0,
      prev:   $('.prev', p),
      next:   $('.next', p),
      pager:  $('.slideshowNav', p)
    });    
});

他のヒント

コードをありがとう。同様のコードを見つけました、 

 $('.minislideshow').each(function() {
    var $nav = $('<div class="pager"></div>').insertBefore(this);

    $(this).cycle({
        timeout: 2000,
        pager:   $nav
    });
 });

同じことをしているようです。私の問題は、最初のスライド以外の画像の画像が表示されないことです。各Divコンテナのスライド数を表すポケットベルアイコンが表示されますが、画像を表示する方法を理解できません。彼らは1つ目でうまく機能しているようです。スライドショー用に複数のDIVを設定し、それぞれが一意のクラスを提供してから、各クラスにJavaScriptを作成すると、結果を得ることができます。上記のコードは役に立たなかったので、各インスタンスの新しいクラスを手動で作成する必要はありませんが、最初のコンテナの横にある他のコンテナのスライド画像は現在表示されていないようですか？

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