2

Anything Slider for Wordpressを使用して、 http://www.storybox.co.nz/2011/lynx/などの画像とビデオの両方を含むスライドショーを作成しています。

ビデオ スライドにリンクするサムネイル アイコンに別のアイコンを使用したいと考えています。一部のスライドが静止画ではなく動画であることを明確にするために、これを行いたいと思います。

iframe を含む各スライドの対応するサムネイル アイコンにクラスを追加するためのヒントはありますか?

残念ながら、スライドとサムネイルは同じクラスを使用しないため、iframe の親を選択してから対応するサムネイルを選択するという最初のアイデアは機能しません。しかし、パネル番号の使用には何かがあるのではないでしょうか?

助けてくれてありがとう！

基本的なコード (最初と最後のスライドはクローンであることに注意してください):

<div class="anythingSlider anythingSlider-default activeSlider">
<div class="anythingWindow">
  <ul class="anythingSlider anythingBase" id="slider-342">
    <li class="cloned panel vertical">
      <div><span>
        <iframe></iframe>
        </span></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical">
      <div><img></div>
    </li>
    <li class="panel vertical activePage">
      <div>
        <iframe></iframe>
      </div>
    </li>
    <li class="cloned panel vertical">
      <div><img></div>
    </li>
  </ul>
</div>
<div class="anythingControls">
  <ul class="thumbNav">
    <li class="tooltip first"><a href="#" class="panel1"><span>1</span></a></li>
    <li class="tooltip"><a href="#" class="panel2"><span>2</span></a></li>
    <li class="tooltip"><a href="#" class="panel3"><span>3</span></a></li>
    <li class="tooltip last"><a href="#" class="panel4 cur"><span>4</span></a></li>
  </ul>
</div>
4

2 に答える 2

1

HTML を変更できないと仮定すると、表示される「コンテンツ」に基づいて小さなスライド インジケーター (アンカー/親 li "a.panel1") を強調表示する JS 関数を記述するときに、要素の順序で変更します (li.パネル）。以下の例:

var nth = 1;
$("li.panel").eq(nth); //get the second graphic
$("a.panel" + (nth + 1)).eq(0); //get the second link a.panel2

あなたのパターンがあります。

于 2013-01-08T23:56:30.133 に答える
0

私はこれが興味深いと思い、jquery の改善に取り組んでいるので、Anything Slider への最も合理的な変更でも確実に機能する、おそらく洗練された/わずかに異なるアプローチを追加しました (さらに、昨日ほとんど書いていましたが、忘れていましたそれを投稿して、それが誰かに役立つ可能性がある場合は無駄にしたくありませんでした):

$('.anythingWindow li.panel:not(.cloned) iframe').each(function() {
  $('.anythingControls li.tooltip').eq($(this).index('.anythingWindow li.panel:not(.cloned)')).addClass('video');
});

ワーキングjsfiddle

sajawikioの回答へのコメントで提供したソリューションとの違いの説明:

  • メイン セレクターは最初に をターゲットにし.anythingWindow、次に、適切な iframe を保持するクローンされていないリスト アイテムに絞り込みます。ページに他の iframe がある場合、これはパフォーマンスに関してはかなり最適化されたままになるはずですが、どちらの方法でも目立つことはないでしょう。ネスト構造に軽度の変更がある場合、同じ基本要素とクラスが使用されている限り、引き続き機能するはずです (div 内の iframe の 1 つをネストすることができ、これは引き続き機能しますが、2 つの親に依存するものがあります)アップが壊れます）。
  • 適切な値で使用.eq()すると、文字列連結を行う必要がなくなります (実際のパフォーマンスの変化があるかどうかはわかりません... とにかく、インデックスで使用される選択クラスによって、おそらくすべての利益が消去されます)
  • .eq()選択クラス (複製されたリスト項目ではない) に関連するそれぞれのインデックスとして引数を使用して呼び出すと、 iframe2 つ以上の複製が存在する場合に、それが適切に機能することが保証されます (さらに、意味的にも正しい)。（説明すると、引数なしで呼び出す.index()と、最初のクローンを含むすべての兄弟要素に対する相対的な位置が返されるため、ソリューションが機能します...を持つ前にli複数のクローンがあった場合、それは壊れます。クローンが存在しない場合--おそらくこれはまったく問題ではなく、決して発生することはありませんが、個人的には、プラグインの明らかなシム[?]が変更または削除されないことに依存するのは好きではありません)。 liliiframeli
  • 私がこれを書いた時点では、 を含むlis にクラスをアタッチし.anythingControl、それに基づいてセレクターを使用して s にアクセスする必要があると想定aしていました。明らかに、どちらでもかまいません。

    • 于 2013-01-09T18:27:01.600 に答える