jQuery Cycle Plugin を使ってみました
少し前にSBMなんかでよく見かけたjQuery Cycle Plugin、かっちょいいからいつか使いたいなーと思ってたんですが、タイミングよく機会があったので使ってみました。
jQuery Cycle Plugin って何?
jsライブラリ「jQuery」のプラグインで、これを使うといろんな種類のエフェクトを使って画像のギャラリーが簡単に作れるという物です。エフェクトというと、なんとなく「script.aculo.us」を連想したりもするんですが、とりあえずサイトでjQuery使ってるし、その流れでjQuery Cycle Pluginを使ってみようということになりました。いろんな動きがあるので、まだ見たことない方は一度jQuery Cycle Pluginでデモを見たらいいかも、です。
設置方法も簡単だった
で、さっそく準備。jQuery本体はjQueryからダウンロード。jQuery Cycle Pluginから jquery.cycle.all.pack.js をダウンロード。まずそれらを<head>内で読み込み、ギャラリーを置きたい場所に id なり class なりを割り当てて、jQuery Cycle Pluginのサイトデモを見ながら使いたい動きを選んで指定すればいいみたい。CSSにも該当部分の画像の位置の指定を忘れずにセット。
ということで、'shuffle'っていう動きを使ったサンプルを作ってみました。
【JS部分】
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.cycle.all.pack.js"></script>
<script type="text/javascript">
$(function() {$('.sample').cycle({
fx:'shuffle',
delay: -2000
});});
【CSS部分】
.sample{
width:250px;
height:188px;
padding:0;
margin:20px auto;
}
.sample img{
top:0;
left:0;
background:#fff;
padding:10px;
border:1px solid #999;
}
【html部分】
<ul class="sample">
<li><img src="img/sample1.jpg" alt="サンプル写真" width="250" height="188" /></li>
<li><img src="img/sample2.jpg" alt="サンプル写真" width="250" height="188" /></li>
<li><img src="img/sample3.jpg" alt="サンプル写真" width="250" height="188" /></li>
<li><img src="img/sample4.jpg" alt="サンプル写真" width="250" height="188" /></li>
<li><img src="img/sample5.jpg" alt="サンプル写真" width="250" height="188" /></li>
</ul>仕組みはこういうことみたい
Firebugで動いてる部分の様子を観察してみると、下記のキャプチャのように該当範囲の画像付近のソースを指定した動きに合わせて display とか z-index などのスタイルの値を書き換えてくれてるみたい。すげーー。
ただjs無効だとダダダーっときた。
やっぱりjavascriptを使うときは無効の時どうなるかなーって確認するわけで・・・。やっぱりこんな風にダダダーっと並んだ。そりゃそうだよね。
なので、js無効の場合は1枚しか表示されない感じにしたいなーと思ってCSS側でも画像の位置をコントロールしてみた。
単に親にposition:reletive;を指定して中に入れてる画像をposition:absolute;で全部同じ位置に重ねてるだけなんだけど、これでとりあえずjs無効でもダダダー状態は回避できるはず。
でも'fade'使うとIEでは・・・なんか変。
上のサンプルの2番目の方、js無効でも画像がダダダーと並ばないように予めpositionを指定した方のサンプルの話。上では動きに 'shuffle' を使ってるんですが、'fade'を使うとなぜかIE6では2枚目以降の画像がでてこないという現象が・・・。なんで？なんでなんで？私だけ？
あとこれも私だけかもしんないけど、特定のブラウザで見ると一瞬だけ全画像が表示されてる。IEとかIEとかIEとか。ほんと一瞬だから別にたいした影響はないんだけども。
オプションもいろいあるみたい。
jQuery Cycle Plugin のこちらのページに付与できるオプションも掲載されてました。
>>jQuery Cycle Plugin - Option Reference
組み合わせるとすごくいろんな事ができそうだなーと思いました。
とりあえず今回のこれ、今までフラッシュでやってた部分と差し替えたんだけど、年に数回しかフラッシュ使わなくて毎回やり方忘れる私のようなタイプの人にはいいかもです。
<< XHTML Role属性モジュール | MySQLのエラーメモ >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/174
コメント (1)
Considerably, the article is in reality the finest on this precious topic. I harmonise with your conclusions and definitely will eagerly look forward to your next updates. Just saying thanks can not just be sufficient, for the phenomenal lucidity in your writing. I definitely will directly grab your rss feed to stay informed of any updates. Delightful work and also much success in your business dealings!
投稿者: Franco Harris Jersey | 2012年01月08日 09:36