jQueryでいくつかの画像を順番に表示するプラグイン

説明画面のようなものを画像を使って作りたいなぁと思ったわけです。

古くはアニメーションGIFなんぞを使ったのかもしれませんが、メンテナンスが面倒そうです。
今どきならば動画を用意するのがよいかもしれませんが、そこまでするほどの内容でないのです。

困った時のjQueryということで探したところ、
Feature List
というプラグインを見つけました。

こちらのページを見て見つけたのでした。
http://phpspot.org/blog/archives/2009/12/jqueryfeature_l.html

具体的な使い方は、上記のページを参考にしてください。

Feature Listを使う際には、
idがtabsとoutputというulタグでくくられたリストを用意します。
(実際は、tabsとoutputでなくてもよいのでしょうが例がそうなっているので。)

で実際には以下の２つの動作が行われます。
(1)idがoutputであるulタグで囲まれたliタグのリストを先頭から順番に表示
(2)idがtabsであるulタグで囲まれたliタグのリスト直下のaタグに先頭から順番にcurrentクラスが移動

なのでidがoutputであるulタグ内のliタグ内にimgタグを書いておけば画像が順番に表示されることになります。仕組みとしてはliタグの中が順に表示されるので別に画像でなくて普通に文章でも問題なしです。
idがtabsであるulタグ内のliタグリストは常に表示されます。currentクラスが順についていくのでcssでcurrentクラスを定義することで見た目を変えていくことになります。

かっこよさげに表示させるには、上記をふまえてcssをちゃんと書くことが重要です。
cssを何も書かないと相当かっこ悪いです。

cssでは最低限、以下ぐらいは入れないとかっこ悪い感じです。
実際はサンプルをちゃんと見たほうがよいです。

div#feature_list {
 height:800px;
}
div#feature_list ul {
 list-style: none; 
}
ul#tabs li a.current {
 color: red;
}
ul#output li {
 position: absolute;
}

div#feature_listのheightは実際に使うサイズにしてください。
div#feature_list ulのlist-styleがnoneでないと・とかでます。
ul#tabs li a.currentは単なる一例です。
ul#output liのpositionがabsoluteでないと当たらし表示が出るときにカクカクします。

cssをちゃんといじればかっこよくなるので、今後も使いそうなjQueryプラグインな気がします。