CSSの書き方も分かるjQueryプラグイン実践活用法
連載インデックスへ
CSSの書き方も分かるjQueryプラグイン実践活用法（4）

画像を美しく魅せる効果を加えるjQueryプラグイン3選

葛西 秋雄
2010/3/17
jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています

2つ重ねて比較・部分切り替え・ズーム/カーテンなど

- PR -

　本連載の第3回「jQuery 1.4の新機能8選＋Tabsプラグインでタブ表示」では、最新のjQueryの機能をいくつか紹介し、jQuery UIの「Tabs」プラグインを利用してタブを表示する方法を紹介しました。また、自作のタブでは、CSSでタブとコンテンツを結合するテクニックについて解説しました。

　今回は、以下のjQueryプラグインを使用して画像に各種エフェクト（効果）を適用する方法を、実際に動くサンプルを見ながら説明します。

  1. Before/Afterプラグインで2つの画像を重ねて比較
  2. panelGalleryプラグインで画像を部分ごとに切り替え
  3. cycleプラグインでズーム/カーテンなどイロイロな美しい効果を

　なお、今回作ったサンプルはこちらからダウンロードできます。

Before/Afterプラグインで2つの画像を重ねて比較

　化粧品のPR、ダイエットの効果などビフォーとアフターを比較するときに便利なBefore/Afterプラグインの使い方を説明します。

図2　Firefoxのアドオン「Firebug」でコンソールにメッセージが出力されたことを確認
図1　春と秋の景色の画像が分割されて表示された（スライダーをドラッグして画像を切り替えできる）（画像をクリックすると、実際にサンプルが試せます）

　Webブラウザを起動してサンプルを表示すると、BeforeとAfterの画像が半分に分割されて表示されます。マウスを画像上に移動すると、中央に緑色のスライダーが表示されるので、ドラッグして左右に移動してみてください。BeforeとAfterの画像の切り替えができます。画像下の両端に表示されている「Show only before」「Show only after」をクリックするとBefore／Afterの画像に切り替わります。

□ ステップ1：ビフォー／アフターの2つの画像を用意

　Before/Afterプラグインで重ねて表示するBeforeとAfterの画像を用意します。サンプルでは、春の風景（treeGreen.jpg）と秋の風景（treeRed.jpg）の画像を用意しました。

図1　<p>要素のstyle属性にwidth、height、opacityが追加されて「0」になるまで段階的に書き換えられているところ（Firefoxのアドオン「Firebug」で確認）
図2　サンプルの「images」フォルダに格納されている画像素材

　なお、本稿ではすべて下記サイトの画像を使っています。

http://www.publicdomainpictures.net/

Public Domain Pictures, Royalty Free Stock Photos, Free Pictures via kwout

□ ステップ2：CSSとライブラリをCDN経由で組み込む

　お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、<head>要素に<link>要素と<script>要素を追加して、CSSとjQueryのライブラリを組み込みます。

<head>
  <link href="base.css" rel="stylesheet" type="text/css" />……【1】
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>……【2】
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>……【3】
  <script src="jquery.beforeafter.js" type="text/javascript"></script>……【4】
</head>
  1. Webページの基本スタイルが宣言されている
  2. jQuery 1.4.2のライブラリをGoogle CDN経由で取り込む
  3. jQuery UI 1.7.2のライブラリをGoogle CDN経由で取り込む
  4. Before/Afterプラグインのライブラリを取り込む

　Before/Afterプラグインの最新版は、以下のサイトからダウンロードできます。

http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

Catch My Fame ≫ jQuery Before/After Plugin via kwout

  1/3

　INDEX
CSSの書き方も分かるjQueryプラグイン実践活用法（4）　
画像を美しく魅せる効果を加えるjQueryプラグイン3選
Page1
2つ重ねて比較・部分切り替え・ズーム/カーテンなど
Before/Afterプラグインで2つの画像を重ねて比較」
  Page2
panelGalleryプラグインで画像を部分ごとに切り替え
  Page3
cycleプラグインでズーム/カーテンなどイロイロな美しい効果を

CSSの書き方も分かるjQueryプラグイン実践活用法 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • コンテンツ政策ヲ転換セヨ！ （2012/2/10）
    mixiにしろTwitterにしろニコ動にしろ、ソーシャルサービスは伸びている。シロウトの個人が作るコンテンツで成り立つサービスだ
  • NFCやLTE対応予定のiPhoneと、先行するAndroid （2012/2/9）
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは？
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH