ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

jQueryプラグイン, スライダー, フルスクリーン

ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」

ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」

Backstretch

以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家のサイトの運営が再開されていないようです。

「maxImage Scaling Plugin」と同じように背景に画像をウィンドウズサイズに調節してフルスクリーン表示させることができるのが、このjQueryプラグイン「Backstretch」です。

少し、手を加えることで背景でスライドショーとして画像を流すことも出来ます。

サンプルを3パターン作ってみました。

簡単に設定できるのと、背景画像を最後に表示させることでメインのコンテンツが表示されるまで待つ必要がないのが特徴です。

設定の方法は続きをどうぞ。


まずは、「Backstretch」のページからファイルを一式ダウンロードします。

続いて、JavaScriptを</body>の直前に設定します。ファイルのある場所へのパスに注意しましょう。

1種類の画像を背景に設定する場合は以上です。これで背景に画像が設定され、ウィンドウズサイズによって画像の大きさが変わります。

2つめのサンプルのようにボタンをクリックすることで背景画像を切り替えるには、まず<body>部にボタンを作って、

そして、JavaScriptを</body>の直前に以下のように設定します。

「Backstretch」には本来、背景画像をスライドショーにする機能を持っていませんが、次のように設定することで簡単にスライドショーが可能です。JavaScriptを</body>の直前に以下のように設定します。

サンプルページのコードをそれぞれ書いておいきます。ご参考までにどうぞ。

基本サンプル

クリックして画像を切り替えるサンプル

背景でスライドショーサンプル

この記事と関連してると思われる記事:


7 コメント

  1. お世話になります。
    上記の文章に沿って使わせていただいたのですが、PC及びiphoneでは
    うまく動作するんですが、アンドロイドけいたいだけ上手く表示されません。
    画像がずれて重なってしまい、完全にエラー状態です。
    知識がいまいちなんでビルダーでなんとか作っている状態なので未熟なのは
    十分に承知しています。
    ご面倒でなければご教授いただければありがたいです。
    宜しくお願い致します。

    • ぱんにゃっと

      コメントありがとうございます。
      アンドロイド携帯が手元にありませんので動作確認が出来ていません。申し訳ありません。

      ちょっとネットで調べたところ、Nexus7などのアンドロイド上での動作の問題が挙がっているようです。ブラウザやタブレットなどの急速な進化に対応が遅れているみたいですね。今、改良中のようですので、次のバージョンに期待・・といったところでしょうか。
      参考:Looking not good at android
      https://github.com/srobbin/jquery-backstretch/issues/188

  2. 田中

    非常に学びとなるコンテンツです。
    ありがとうございます。ただ、私の場合うまく作動しないため
    ソースを見させて頂く中で一つ質問させて頂きたいのですが、
    ソースに以下のjpgがありますが、

    “sample_slide13jpg”,
    31
    “sample_slide2.jpg”,
    32
    “sample_slide3.jpg”,
    33
    “sample_slide4.jpg”,

    http://pannyatto.firebird.jp/sample/backstretch/examples/sample_slide13.jpg

    で検索しても閲覧できず、どこに保存しておられるのかが気になりました。
    これはどこの画像フォルダに入れておけばこのjsは読み込むのでしょうか?
    ご指導のほど、よろしくお願いいたします。

    • ぱんにゃっと

      コメントありがとうございます。

      ご指摘の点ですが、単純にこちらのミスでした。
      混乱させてしまいまして、申し訳ありません。

      正しくは
      sample_slide13jpg → sample_slide1.jpg
      です。

      修正しました。ご指摘ありがとうございます。

      サンプルでは、HTMLファイルがある同じフォルダに画像を入れています。

  3. DD

    背景でスライドショーサンプルを使え褪せて頂いてます。
    質問なのですが、これを表示したままブラウザを放置しているとメモリを食うのかかなり重くなってくるのですが、何か解決方法とかありますでしょうか?

    宜しくお願い致します。

    • pannyatto

      DD様、コメントありがとうございます。

      本来、Bacstrechには背景でスライドショーさせる機能はありませんでした。
      しかし、Backstrechのサイトを確認しましたところ、最新版はオプションで簡単に背景で画像を切り替えれるようになっているようです。

      以下のようにdurationとfadeを設定してあげるとよいらしいです。基本サンプルと見比べてみて下さい。

      $.backstretch([
      “http://dl.dropbox.com/u/515046/www/outside.jpg”
      , “http://dl.dropbox.com/u/515046/www/garfield-interior.jpg”
      , “http://dl.dropbox.com/u/515046/www/cheers.jpg”
      ], {duration: 3000, fade: 750});

      ※durationは1枚ずつの画像を表示させている時間、fadeは切り替え時のフェードインさせるスピードです。

      これでブラウザが重くなる問題を解決できるかはわかりませんが、以前のようにJavascriptを追加して無理やりスライドショーを実現させていた場合よりも軽くなっていると思います。

  4. DD

    ありがとうございます!
    かなり軽くなりました!感謝です。

Leave a Reply

Theme by Anders Norén