JQuery Cycle Plugin を使った画像のスライド・エフェクト

2010年8月30日

JQuery Cycle Plugin(サークル・プラグイン)を使うと、
様々なエフェクトをかけた画像のスライドショーや
少し目立つリンクバナーを比較的簡単に作成することができます。
(ソースをDLもできますが、それは使わなくても作れます。)

JQuery Cycle Plugin の配布元のホームページ(英語)
主なエフェクトを見ることができます。



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


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

ソールを見ると分かるように、
次の2つのライブラリはフルパスでリンクを張って済ませます。

  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 をオフにしている場合でも
最初の画像1枚だけが表示され、
レイアウトが著しく崩れることを避けることができます。

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 をクリックして確認できます。


エフェクトの速度やタイミング、画像の重なり具合などの
パラメーター(=オプション)は fx: 'zoom' の下に
記述を追加して行います。

例)
  $(document).ready(function() {
  $('.slideshow').cycle({
   fx: 'zoom',
   speed: 500, // トランジションの速度
   timeout: 5000, // 次のトランジションが起こるまでの間隔時間
   sync: 1 // 1はtrueで重なるように同時に起こる。0だと別々
   });
   });

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

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


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


気づいたいくつかの問題点
  • 個々の画像へのリンク方法は通常の a href="" でOK(「jQuery Cycle Plugin - Anchor Demo」も参照)ですが、リンクを張ると一部エフェクトの挙動がおかしくなるケースが見受けられます。(主に zoom が関わるエフェクト)

  • CSS にしろ JavaScript にしろ、外部ファイル化が望ましいわけですが、外部ファイル化すると Internet Exploter 6(Win)でエフェクトが効かなくなります。


ラベル:



◎この投稿へのリンク:

リンクを作成

▲このページの先頭へ