フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」
- 投稿日：2016/06/06 ｜最終更新：2016/06/07
- JavaScript/jQuery
- スライドショー
フルスクリーンで背景画像を表示するjQueryプラグインはいくつかありますが、今回はスライドショーにもできる「MaxImage2」を紹介します。
MaxImage2とは
MaxImage2は背景画像をフルスクリーンで表示するjQueryプラグインです。
セレクタ要素に複数の画像を指定することでスライドショーにもできます。
また、動画を流すこともできます。
ダウンロード
スクリプトは下記URLからダウンロードしてください。
利用方法
スライドショーがない場合
headタグ内の記述
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.maximage.js"></script>
<link rel="stylesheet" href="./jquery.maximage.css" type="text/css" media="all" />
<script type="text/javascript">
$(function(){
jQuery('#maximage').maximage({});
});
</script>
bodyタグ内の記述
body直下に下記のように記述します。
<div id="maximage">
<img class="bgmaximage" src="./back1.jpg" width="2000px" height="1333px" />
</div>
headタグ内で指定したセレクタ要素の中にIMGタグで画像を指定します。
スライドショーにする場合
headタグ内の記述
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.cycle.all.js"></script>
<script type="text/javascript" src="./jquery.maximage.js"></script>
<link rel="stylesheet" href="./jquery.maximage.css" type="text/css" media="all" />
<script type="text/javascript">
$(function(){
jQuery('#maximage').maximage({});
});
</script>
bodyタグ内の記述
body直下に下記のように記述します。
<div id="maximage">
<img class="bgmaximage" src="./back1.jpg" width="2000px" height="1333px" />
<img class="bgmaximage" src="./back2.jpg" width="2000px" height="1333px" />
<img class="bgmaximage" src="./back3.jpg" width="2000px" height="1333px" />
</div>
headタグ内で指定したセレクタ要素の中にIMGタグで画像を指定します。
オプションについて
よく使いそうなオプション設定を紹介します。
スライドショーの各種設定は下記のとおりです。
jQuery('#maximage').maximage({
cycleOptions: {
fx: 'fade', //スライドの切替方法。他にはscrollTop,scrollRight,scrollDown,scrollLeft等
speed: 1000, //スライドを切り替える速さの設定
timeout: 1000, //スライドを表示しておく時間の設定
},
});
background-sizeは通常coverで表示されますが、containにする場合は下記の通りです。
jQuery('#maximage').maximage({
cssBackgroundSize: false,
verticalCenter: false,
backgroundSize: 'contain',
});
