REDLINE MAGAZINE | jQuery Cycle Plugin を使ってみましたREDLINE MAGAZINEトップページへ

すべてのエントリを見る

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'っていう動きを使ったサンプルを作ってみました。

>>jQuery Cycle Pluginサンプル

【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 などのスタイルの値を書き換えてくれてるみたい。すげーー。

jQuery Cycle Pluginが動いてる時のソースの様子

ただjs無効だとダダダーっときた。

キャプチャ・js無効の時の表示

やっぱりjavascriptを使うときは無効の時どうなるかなーって確認するわけで・・・。やっぱりこんな風にダダダーっと並んだ。そりゃそうだよね。

なので、js無効の場合は1枚しか表示されない感じにしたいなーと思ってCSS側でも画像の位置をコントロールしてみた。

>>jQuery Cycle Pluginサンプル その2

単に親に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

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。