I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

I'll be NET BLOG

なにかの役には立つかもしれない。

トップページ > 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プラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

日記検索

エントリー検索フォーム
キーワード

Feed

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】