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

トップページ > 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',
        });

 

記事移動

関連記事

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

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

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

jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法

Masonryを利用した時要素が重なるなどうまく並び変えられない場合の「imageLoaded」を利用した対処法

要素をタイル状に表示する超有名jQueryプラグイン「Masonry」の基本的な使い方

複数のカラムの高さを最大値に揃えてくれるjQueryプラグイン「jQueryAutoHeight.js」

Comment Form

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

ユーティリティ

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

プロフィール

author:I'll be NET

since:2014.01.01

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

more

Feed

Tagcloud