フルスクリーンで背景を表示するスライドショーにも対応可能なjQueryプラグイン「MaxImage2」

投稿日：2016/06/06 ｜最終更新：2016/06/07
JavaScript/jQuery
スライドショー

フルスクリーンで背景画像を表示するjQueryプラグインはいくつかありますが、今回はスライドショーにもできる「MaxImage2」を紹介します。

MaxImage2とは

MaxImage2は背景画像をフルスクリーンで表示するjQueryプラグインです。
セレクタ要素に複数の画像を指定することでスライドショーにもできます。
また、動画を流すこともできます。

DEMO

ダウンロード

スクリプトは下記URLからダウンロードしてください。

MaxImage2
github｜MaxImage2

利用方法

スライドショーがない場合

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',
        });