関西食育デザイン

関西の食育デザイナーによる技術ブログ

HPの背景全体にスライドショーで写真を表示させる方法 [MaxImage2]

画面サイズに合わせて自動伸縮する画像を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内で読み込みます。ファイルの場所は適正書き換えて下さい。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'>
<link href="./css/jquery.maximage.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery.maximage.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.all.js"></script><!--←この行はスライドショーにする時のみ記載-->

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

<script type="text/javascript">
$(function(){
    // Trigger maximage
    jQuery('#maximage').maximage();
});
</script>

背景画像を読み込む

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

<div id="maximage">
  <img src="./images/background.jpg" alt="">
</div>

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

<div id="maximage">
 <img src="./images/picture1.jpg" alt="">
 <img src="./images/picture2.jpg" alt="">
 <img src="./images/picture3.jpg" alt="">
 <img src="./images/picture4.jpg" alt="">
</div>

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