この記事を読むのにかかる平均時間: 152

画面サイズに合わせて自動伸縮する画像をHPの背景全体に表示する方法&スライドショーにする方法です。

 

「MaxImage2」を利用する事で実現可能

・画面サイズに合わせて背景に画像を表示する

・背景の画像をスライドショーにする

これらの事はMaxImage2を利用する事で実現する事ができます。

サンプルを見る

 

設置方法

ダウンロード

GitHubからMaxImage2をダウンロードします。

https://github.com/akv2/MaxImage/archive/master.zip

 

必要なファイル

ダウンロードしたファイルの中で必要なものは以下の二つです。

/lib/css/jquery.maximage.css

/lib/js/jquery.maximage.js

この2ファイルで背景に静止画1枚を表示する事ができますが、複数枚でスライドショーにしたい場合は更に

/lib/js/jquery.cycle.all.js

が必要になります。

 

「jquery.cycle.all.min.js」のようにそれぞれ、ファイル名に.minが付いたファイルもありますがそちらでも構いません。違いはmin付きの方が少しサイズが小さいです。

読み込む

jQueryと先ほどのファイルをheader内で読み込みます。ファイルの場所は適正書き換えて下さい。

その下にで良いので、MaxImageをロードする処理を記載します。

背景画像を読み込む

次に背景に表示する画像を指定します。<body>~</body>の間に以下を記載します。

スライドショーにしたい場合は

このように複数の画像を記入していきます。

 

 

こんな記事もいかがですか

食育管理人技術的な事柄HTML,Javascript,jQuery,スライドショー画面サイズに合わせて自動伸縮する画像をHPの背景全体に表示する方法&スライドショーにする方法です。 「MaxImage2」を利用する事で実現可能 ・画面サイズに合わせて背景に画像を表示する ・背景の画像をスライドショーにする これらの事はMaxImage2を利用する事で実現する事ができます。 サンプルを見る   設置方法 ダウンロード GitHubからMaxImage2をダウンロードします。 https://github.com/akv2/MaxImage/archive/master.zip   必要なファイル ダウンロードしたファイルの中で必要なものは以下の二つです...関西の食育デザイナーによる食育ブログ