「jQuery Cycle Plugin」の気になるところを修正

「jQuery Cycle Plugin」は、簡単にスライドショーを作れる便利なjQueryプラグインです。
IE6でも見れるので、クライアントワークで重宝しております。

導入時に2点、気になる箇所があったので対処法をメモしておきます。

１）スライドさせたい要素がimg単体の場合、小さくリサイズされてしまう。
２）読み込む時、一瞬すべての画像が見える。

１）スライドさせたい要素がimg単体の場合、小さくリサイズされてしまう。

上記の対処法は、imgをliなどで囲うことでリサイズを回避できました。

修正前

<div id="sample">
<img src="cycle/image1.jpg" width="100" height="100" alt="" />
<img src="cycle/image2.jpg" width="100" height="100" alt="" />
<img src="cycle/image3.jpg" width="100" height="100" alt="" />
</div>

修正後

<ul id="sample">
<li><img src="cycle/image1.jpg" width="100" height="100" alt="" /></li>
<li><img src="cycle/image2.jpg" width="100" height="100" alt="" /></li>
<li><img src="cycle/image3.jpg" width="100" height="100" alt="" /></li>
</ul>

２）読み込む時、一瞬すべての画像が見える。

これについては、htmlとcssに記述を加えることで回避しました。
読み込み時には最初以外の画像を隠しておきます。

<ul id="sample">
<li><img src="cycle/image1.jpg" width="100" height="100" alt="" class="first" /></li>
<li><img src="cycle/image2.jpg" width="100" height="100" alt="" /></li>
<li><img src="cycle/image3.jpg" width="100" height="100" alt="" /></li>
</ul>

#sample li {
	display:none;
	}
#sample li.first {
	display: block
	}

 - jQuery