0

David De Sandro の jQuery Isotope プラグインを使用して、1 ページの Web サイトに取り組んでいます。7 Isotope Elements では、Cycle スライドショー プラグインを基本的な方法で実行しています (クリック、ページネーション、一時停止、ホバーなどはありません)。それは機能しますが、これをあまり効果的に実装していないのではないかと思います。

HTML (7 つの同位元素の 1 つ)

<div class="content">
  <div class="slideshow preview1">
  <img src="media/cl_t_preview_0.jpg" />
  <img src="media/cl_t_preview_1.jpg" />
  <img src="media/cl_t_preview_2.jpg" />
  </div>
</div> // and 6 more...

CSS (全 7 スライドショー用)

.slideshow.preview1, .slideshow.preview2, .slideshow.preview3, .slideshow.preview4, .slideshow.preview5, .slideshow.preview6, .slideshow.preview7 {
position: relative;
overflow: hidden;
height: 252px;
width: 252px;
}
.slideshow.preview1 img, .slideshow.preview2 img, .slideshow.preview3 img, .slideshow.preview4 img, .slideshow.preview5 img, .slideshow.preview6 img, .slideshow.preview7 img {
display: block;
}

JS (7 つのインスタンス - これは反復的で効果がありません)

$(document).ready(function() {

    $('.slideshow.preview1').cycle({
    fx: 'scrollHorz',
    random: 1,
    speed: 300,
    timeout: 6000,
    delay: -1000
});
    $('.slideshow.preview2').cycle({
    fx: 'scrollHorz',
    random: 1,
    speed: 300,
    timeout: 6000,
    delay: -2000
}); // and five more calls...
});

では、今やっているように 7 回も根気よく繰り返すよりも、JS の部分をより効果的にするにはどうすればよいでしょうか。どういうわけか、クラス名と 7 つの異なる遅延値だけを渡す必要があります...

ここで、Michael Malsup はテーブルを使った手法 (私には理解できません) を使用して、HTML 自体を介して必要なパラメーターを渡します。それが最善の方法ですか?HTML5 データ属性の使用を見たところです。多分それは私のJSの冗長性を取り除くためのベストプラクティスの方法ですか?

<div class="content">
  <div class="slideshow preview" data-delay="-2000"> // each occurrence has its own delay
      <img src="media/prevslide_3.jpg" alt="Img 1" />
      <img src="media/prevslide_4.jpg" alt="Img 2" />
      <img src="media/prevslide_5.jpg" alt="Img 3" />
  </div>
</div>

$('.slideshow.preview').cycle({ // and the call needs to occur only once
fx: 'scrollHorz',
random: 1,
speed: 300,
timeout: 6000,
delay: -2000 // but how to pass the data-delay value in here?
});

事前にどうもありがとうございました!

4

0 に答える 0