jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】
今ではあちこちで見かけるようになった
Webページでの背景全体の画像フルスクリーン表示。
単純に一枚の画像を表示するパターンや
複数画像を切り替えて背景でフルスクリーンスライドショーにしたり
ランダムで表示する画像を切り替えたり
などなど、魅せ方はさまざまですが、
これらをjQueryを使ってできるだけシンプルなスクリプトで
実装ができないか試してみたので紹介してみます。
jQueryで背景に画像をフルスクリーンで表示するいろいろ
今回は、単一画像／スライドショー／ランダム の全部で3パターン紹介しますが、
HTMLとCSSは全て同じ構成になりますので
先にこの２つのソース構成について。
まずはHTMLから。
[html]
◆HTML
jQuery FullScreen BackGround IMG
ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。
これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。
これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。
COPYRIGHT © BLACKFLAG.NET ALL RIGHTS RESERVED.
[/html]
実際にフルスクリーンで画像を表示する部分のタグはJS側で生成するので
HTMLにはページ上に表示するコンテンツ要素の内容を記述しておきます。
コンテンツ要素には必ず全体を囲うブロック要素が必要になります。
（サンプルでは「#contents」）
これに対してのCSSは以下。
[css]
◆CSS
#container {
width: 100%;
text-align: center;
}
/* #fullbg_stretch
————————— */
#fullbg_stretch img {
visibility: hidden;
}
/* #contents
————————— */
#contents {
margin: 50px auto;
width: 800px;
color: #000;
text-align: left;
position: relative;
z-index: 99;
}
#contents #overlaybg {
top: 0;
left: 0;
width: 100%;
background: #fff;
position: absolute;
}
#contents #wrapper {
width: 100%;
text-align: left;
position: relative;
}
#contents p {
padding: 0 15px 30px 15px;
position: relative;
}
[/css]
背景で表示する画像「#fullbg_stretch img」は
CSS側ではひとまず非表示にしておきます。
コンテンツ要素全体を囲うブロック要素「#contents」には
「position: relative;」を必ず入れておく必要があります。
他はほとんどがサンプル画面のレイアウトを構成するものになっているので
その都度カスタマイズしていただく必要があるかと思います。
そしてここから先がフルスクリーン表示のスクリプトについて、
まずは単一画像で表示するパターンから。
単一画像
まずは動作のサンプルから。
下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます）
【単一画像】jQueryで背景に画像をフルスクリーンで表示するサンプルを別枠で表示
単一画像が背景にフルスクリーン表示されます。
これを実装するスクリプトは以下の様になっています。
[javascript]
◆SCRIPT
[/javascript]
スクリプト8行目～10行目で画像を表示するブロック要素IDを生成しています。
9行目の＜img＞タグ部分が使用する画像のパスになるので
画像ファイルの格納先が変わる場合などはここで変更するようになります。
14行目では画像がフェードインする際の時間設定ができますが
フェードインさせたくない場合は「0」の値を入れます。
表示後はブラウザウィンドウサイズと
フルスクリーン表示する画像の比率を計算して
全体の表示サイズを調整しています。
※ウィンドウサイズをリサイズしても同じ処理を実行させています。
背景の単一画像フルスクリーン表示は
この様な感じで実装できます。
続いてスライドショーパターン。
スライドショー
まずは動作のサンプルから。
下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます）
【スライドショー】jQueryで背景に画像をフルスクリーンで表示するサンプルを別枠で表示
フルスクリーンで表示された画像（サンプルでは5枚）が
クロスフェードして切り替わります。
これを実装するスクリプトは以下の様になっています。
[javascript]
◆SCRIPT
[/javascript]
スクリプト9行目～13行目で表示する画像＜img＞タグを生成しており
表示する枚数を変更する際には、この部分で記述している＜img＞タグ部分を増減させます。
スライドショー動作スクリプトは、当ブログ別記事の
「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法」の
記事で紹介している内容とほぼ同じ構成になっています。
ウィンドウサイズとフルスクリーン表示する画像の比率を計算する部分は
単一画像パターンの時と同じ構成になっています。
背景フルスクリーンでのスライドショーパターンは
この様な感じで実装することができます。
最後はランダム表示パターン。
ランダム
まずは動作のサンプルから。
下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます）
【ランダム】jQueryで背景に画像をフルスクリーンで表示するサンプルを別枠で表示
サンプルでは5枚の画像をリロードする度にランダムで表示を切り替えて表示しています。
これを実装するスクリプトは以下の様になります。
[javascript]
◆SCRIPT
[/javascript]
スクリプト7行目の「var maxNum」に使用する画像の最大枚数の値を入れて
画像に対してはファイル名に命名規則を付けて最後に1～5の数値を入れるようにしています。
（サンプルでは「photo1.jpg」～「photo5.jpg」）
そしてこの数値がランダムで割り当てられることで画像を表示しています。
背景フルスクリーンでのランダム表示パターンは
この様な感じで実装することができます。
以上が背景に画像をフルスクリーンで表示する3パターンの実験紹介になります。
3パターンともにスクリプト開始すぐに
「$.ajaxSetup({cache:false});」の記述が入っていますが
IEではサイズ取得したもろもろの値がajaxキャッシュされてしまうことで
ページをリロードなどした際に比率の計算がおかしくなってしまうので
ajaxキャッシュするのを抑制するために入れてあります。
（参考：IEがajaxキャッシュするのを抑制 – はらぐろブログラマン）
加えて、3パターン共にスクリプトの下部に「コンテンツ部分の背景オーバーレイ」として
コンテンツ表示部分に透過した背景色オーバーレイの指定を入れてありますが
この部分は背景にフルスクリーンで画像を表示する動作自体には影響しないものになっているので
実装の際に不必要な場合は、4行共に削除してしまっても問題ないかと思います。
背景に大きな画像を敷く際には、重さの負荷など
いろいろと構成に気をつけなくてはいけないところもありますが
ダイナミックな見た目を表現できる手法のひとつかと思っています。
jQueryで背景に画像をフルスクリーンで表示する際に是非。。。
ピンバック: jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】 | BlackFlag | ちゅどん道中記
ピンバック: 【jQuery】背景全画面表示に学ぶ、リサイズ【javascript】 | ブログ | ColorFullWeb
初めまして、こちらのサイトはよくご利用させていただいています。
実は記載URLのtopページでjQueryを使用しフルスクリーンで写真を表示させる方法を使わせていただいているんですが、
さくらインターネットにサーバーをUPしたところ写真が全く表示されず
どうしたらいいか迷っています。
すいませんが、ご教授いただけると助かります。
jQueryも正直あまり分かっていません
すいません＞＜
＞くらくらさん
コメントありがとうございます。
このフルスクリーンスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが、
ローカルでは正常に動作しているものが
サーバにアップすると不具合を起こすということでしょうか。
その様な事象はこちらではまだ聞いたことはないのですが
当記事のサンプルスクリプトをそのまま使用しても
同じ現象が起こるでしょうか。
もしサンプルスクリプトが正常に動作するならば
他のJSなどが何か影響を起こしているのではないかと思われますので
一度確認してみてください。
よろしくお願いします。
ご返事いただきありがとうございます。
すいません
上記サンプルファイルをDLし書き直したら正常にサーバーにUP出来ました。
こちらの早とちりでした。
今後ともよろしくお願いします。
はじめまして。フルスクリーン＆ランダム表示をこちらで学ばせて頂き、店舗ＨＰにて活用させて頂いております。とても見栄えがよく大変気に入っています。ありがとうございます。
そんな中ひとつだけ、最近タブレットを使うことが多くなり気付いたのですが、画面の縦横切替を行った時（縦画面にした時）、背景画像の左端20%程度が拡大され、全体が表示されないという状況です。こちらを解決することはできませんでしょうか。
どうぞよろしくお願いします。
＞hush-hushさん
コメントありがとうございます。
この背景フルスクリーンスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件についてですが
フルスクリーン表示する際に画面内に余白が出ないように
画面の縦横の値の大きい方に画像の基準サイズが合うようにしてあります。
おそらく仰っている現象は
スマホ・タブレットの様な縦画面で
横長の画像を表示しようとすると
画像の縦（高さ）が基準となることで
画像の右側はカットされた状態になります。
（この場合、画像の横幅に合わせて画面にフルスクリーンにすると
下に大きな余白が空くことになります）
言葉では説明しづらいのですが
フルスクリーン表示の場合はこの様な仕様になってしまうので
スマホ・タブレットでも画像をきれいに見せようとすると
判別処理を使って画像を切り替える必要があるかと思っております。
ご確認ください。
よろしくお願いします。
早速のお返事ありがとうございます。
横画面でも縦画面でもある程度見れる背景をと考えると正方形に近い画像が良いということですね。
非常に勉強になります。
今後もこちらのサイトを参考にさせて頂きたいと思っています。
今後ともよろしくお願いします。
はじめまして、WEBのデザイナーをしております。
フルスクリーン＆ランダムの仕様を実装しなければならず、
JavaScriptはめっきり弱く困っていたところ、こちらで発見し、とてもありがたく活用させていただいてます。
ありがとうございます。
ひとつ、もしおわかりになったらと思いお問い合わせさせていただきました。
IEで見ると、たまに背景写真が縦にのびてしまいます。
ご説明にもあった「$.ajaxSetup({cache:false});」がそれを解消するものなのかな…と思っていたのですが、そちらを入れても頻繁に現れてしまう現象です。
何か解決策のお心当たりがあれば、 ご教示いただければ幸いです。
どうぞ宜しく御願いいたします。
＞ナベロボさん
コメントありがとうございます。
このフルスクリーンスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
サーバ環境やPCスペックにも影響するのか
こちらでなかなか同様の現象を再現することが出来ずにいるのですが
想定で考えられる対策としては
スクリプト17行目の
———————————–
var fadeSpeed = 1000; // フェード表示させない場合は「0」
———————————–
の下に
———————————–
var fadeSpeed = 1000; // フェード表示させない場合は「0」
var bgWidth = ”,bgHeight = ”;
———————————–
といった記述を追加することで
解消されるかもしれません。
もしくはHTMLｌ側でもキャッシュを防ぐmeta記述
———————————–
＜meta http-equiv=”Pragma” content=”no-cache”＞
＜meta http-equiv=”Cache-Control” content=”no-cache”＞
＜meta http-equiv=”Expires” content=”0″＞
———————————–
を入れてみる方法も効果があるかもしれません。
憶測での回答になってしまい申し訳ありませんが
一度お試しいただけますでしょうか。
よろしくお願いします。
早々にご回答いただき誠にありがとうございます！
>サーバ環境やPCスペックにも影響するのか
>こちらでなかなか同様の現象を再現することが出来ずにいるのですが
はい、たしかにわたしもクライアント様から指摘いただきはじめて気付いたので
環境によるところも大きそうです。
そしてご指定のタグをさっそく試してみたいと思います。
大変感謝いたします。
今後ともどうぞ宜しく御願いいたします。
＞ナベロボさん
ご確認ありがとうございます。
やはりPCスペックなどに影響されて発生するようですね。。
またこちらでも何か対策がないか
検討させていただきます。
よろしくお願いします。
初めまして。
いつも参考にさせて頂き、誠に感謝しています。
初心者の私でも分かり易く掲載していただいてるので、BlackFlagさんのサイトでは、何度かお世話になってます。
早速ですが、こちらのフルスクリーンスクリプトを利用して、大きめの3枚の画像をフェードして作成したいと思っています。
その際、画像を中央表示させたいのです。
ユーザー側の各ブラウザ上で画像が真ん中で表示させるにはどうしたらいいでしょうか？
スクリプトで画像を指示してあるので、私の頭ではどうしたらいいのかサッパリで…；；
拙い文章で申し訳ありません。
お手すきの際、ご指示の方を宜しくお願いします。
＞ちはるさん
コメントありがとうございます。
このフルスクリーンスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
背景画像を中央寄せにする場合には
スライドショー用のスクリプトの26行目の
「$(stretchId)」に対してのCSS「left」の値を「50%」にして、
38行目の「$(stretchId)」に対してCSSで「marginLeft」を「-bgWidth/2」という様に
全体幅の半分のサイズを「-」マイナスの値で指定することによって実現できるかと思っております。
（CSSによって背景画像エリア全体をウィンドウの中央寄せにしています。）
参考までにサンプルファイルも用意しましたので
必要であれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryBgFullScreenImg/jQueryBgFullScreenImgCenter.zip
お試しください。
よろしくお願いします。
はじめまして。
素敵なスライドショーに巡り合うことができました。
是非使わせていただきたいと思うのですが
スライドショーの上に文字を固定して
表示しておきたいのですが
どうしたらよいか教えていただけますか？
＞こはくさん
コメントありがとうございます。
当記事のフルスクリーンスクリプトご活用いただいている様で
嬉しく思っております。
スライドショーの上に文字を固定させるには
サンプルのコンテンツ枠と同様に要素を追加して
その要素に対して「position: fixed;」を使って
位置固定する方法で実現できるのではないでしょうか。
お試しください。
よろしくお願いします。
はじめまして。
こちらのフルスクリーンスライドショーを使わせていただいています。
初心者にもわかりやすくとても助かっています。
ありがとうございます。
フルスクリーンスライドショーで作ったものに、
スマホ対応用に ＜meta name=”viewport” content=”width=device-width, initial-scale=1″＞の指定をしたところ、
最初の画像がぱっと表示されて、すぐに消えて、それからフェードでスライドショーが始まるようになってしまいました。
もし解決策がわかりましたら教えていただけますでしょうか？
＞みきさん
コメントありがとうございます。
当記事のフルスクリーンスクリプトご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
当記事からダウンロードできるサンプルファイルでも
同じ現象が起きる、ということでしょうか。
こちらでも検証してみましたが
同じような現象が確認できずにいるので
憶測での対処になってしまいますが
CSSに以下の指定を追加してみたらいかがでしょうか。
————————–
#fullbg_stretch img {
visibility: hidden;
}
————————–
CSSで画像をデフォルトの状態で非表示にしておく処理になり、
表示処理はスクリプト側から実行されます。
お試しください。
よろしくお願いします。
早々にご返答いただき、ありがとうございます！
CSSの名前を変えてしまっていたようで、
ダウンロードしたもので最初から組み直してみたら、
問題なく動きました。
初歩的な間違いで、大変失礼いたしました。
ご親切に教えていただきありがとうございました！
＞みきさん
無事に問題も解消したようで安心いたしました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。