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

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

フルスクリーンで背景画像を表示する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',
        });

 

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)