> 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でlabelにクリックイベントを設定するとダブルクリック判定になる時の対処法

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
(スパム対策に、投稿キー を半角で入力してください。)