JQuery Cycle Plugin（サークル・プラグイン）を使うと、

様々なエフェクトをかけた画像のスライドショーや

少し目立つリンクバナーを比較的簡単に作成することができます。

（ソースをDLもできますが、それは使わなくても作れます。）

JQuery Cycle Plugin の配布元のホームページ（英語）で

主なエフェクトを見ることができます。

　　▶ jQuery Cycle Plugin

サークル・プラグインを設置したベースとなるウェブページの見本は

次のURLとなります。

　　▶ JQuery Cycle Plugin - Basic Demo

このウェブページのHTMLソースをコピーして編集して行きます。

ソールを見ると分かるように、

次の２つのライブラリはフルパスでリンクを張って済ませます。

　　jquery.js

　　jquery.cycle.js

jquery.js の最新バージョンについては、

このブログ「Google AJAX Libraries API の使い方」を参照します。

jquery.cycle.js のバージョンは jquery.cycle.all.latest.js という

常に最新のバージョンになるライブラリへの

便利なフルパスリンクで完了します。

ベースのソースを元に実際に編集するのは

次の CSSと JavaScript の部分です。

　　CSS（.slideshow）

　　JavaScript（以下の部分）

　　　　　$(document).ready(function() {

　　　　　$('.slideshow').cycle({

　　　　　 fx: 'zoom'

　　　　　 });

　　　　　 });

CSS（.slideshow）では、

　　overflow: hidden;

という設定を追加することで、

ブラウザーが JavaScript をオフにしている場合でも

最初の画像１枚だけが表示され、

レイアウトが著しく崩れることを避けることができます。

JavaScript の部分については

　　fx: 'zoom'

の zoom の部分を

　　blindX、blindY、blindZ、cover、curtainX、curtainY、

　　fade、fadeZoom、growX、growY、none、scrollUp、

　　scrollDownscrollLeft、scrollRight、scrollHorz、scrollVert、

　　shuffle、slideX、slideY、toss、turnUp、turnDown、

　　turnLeft、turnRight、uncover、wipe、zoom

に変えることでエフェクトの種類を変更できます。

これらエフェクトの実際の動きは

次のページで fx をクリックして確認できます。

　　▶ jQuery Cycle Plugin - Effects Browser

エフェクトの速度やタイミング、画像の重なり具合などの

パラメーター（＝オプション）は fx: 'zoom' の下に

記述を追加して行います。

例）

　　$(document).ready(function() {

　　$('.slideshow').cycle({

　　 fx: 'zoom',

　　 speed: 500, // トランジションの速度

　　 timeout: 5000, // 次のトランジションが起こるまでの間隔時間

　　 sync: 1 // 1はtrueで重なるように同時に起こる。0だと別々

　　 });

　　 });

　　※オプションの最終行にはコンマ（ , ）を付けないこと。

追加できるオプションについては次のページを参照。

　　▶ jQuery Cycle Plugin - Option Reference

（オプションの一部について日本語で解説しているホームページ：

　http://shanabrian.com/web/library/cycle.php）

気づいたいくつかの問題点

• 個々の画像へのリンク方法は通常の a href="" でOK（「jQuery Cycle Plugin - Anchor Demo」も参照）ですが、リンクを張ると一部エフェクトの挙動がおかしくなるケースが見受けられます。（主に zoom が関わるエフェクト）
  
  
• CSS にしろ JavaScript にしろ、外部ファイル化が望ましいわけですが、外部ファイル化すると Internet Exploter 6（Win）でエフェクトが効かなくなります。

Tweet