• RSS

[JS]ブラウザに合わせて背景画像を拡大・縮小表示できるjQueryプラグイン「maxImage」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ブラウザのサイズに合わせて背景画像を伸縮できるjQueryプラグイン「maxImage」のご紹介です。

1枚の背景画像を置く以外にも、複数枚の画像をフェードイン・フェードアウトで切り替え表示させることもできますので、非常に便利なプラグインではないかと思います。

maxImage ファイルのダウンロード

以下のページよりmaxImage のファイルを一式ダウンロードします。
ブラウザに合わせて背景画像を拡大・縮小表示できるjQueryプラグイン「maxImage」


maxImage の基本的な使い方

ダウンロードしたmaxImage ファイルの中からjquery.maximage.js とjquery.maximage.css を<head>タグ内に設置します。


背景として使用したい画像は、このように記述します。


まずは1枚の画像を背景として表示させるデモを用意しました。
maxImage の基本的な使い方のデモ


複数枚の背景画像をスライドショーにしてみる

ダウンロードしたmaxImage ファイル内にあるjQuery Cycle options を使うことで、色々なカスタマイズが可能になります。

その中でも今回は、複数枚の背景画像をスライドショーのように切り替えて表示させる方法をご紹介します。

上記コード 9行目のfx: 'fade' で、スライド時の効果として「フェードイン」を指定しています。
※他にもscrollUp ,shuffle などの様々なjQuery Cycle の効果を入れることができます。

10行目のspeed はスライドの早さです。

11行目のtimeout で、次の画像にスライドで切り替える際の時間を設定できます。
※値を「0」にすると画像の切り替えが行われません。

12行目のpause:1 は、オンマウスで画像を停止させる処理です。
※オンマウスによる画像停止をしたく無い場合は「1」でなく「0」を指定します。

14行目のonFirstImageLoaded: function()で、画像読み込み後の処理を入れています。


背景として使用したい複数枚の画像を、以下のように記述します。


以下に、フェードインによるスライドショーのデモを用意しました。
maxImage による複数枚の背景画像のスライドショーデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください