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?
});
事前にどうもありがとうございました!