Lesson 06 Lightbox風に画像表示を演出する- Webデザイン表現&技法の新・スタンダード・インタラクション編

2011.5.11 WED

Webデザイン
表現&技法の
新・スタンダード

Lesson 6

Lightbox風に
画像表示を演出する

	制作・文	河原覚（株式会社アークフィリア）
＞	To Use	CSS \| JavaScript
＞	Browser	IE 6over \| Firefox 3over \| Safari 5over

魅力的なWebサービスが続々と出現し、そのコンテンツにアクセスするためのAPIも多くが公開されている。その中でも特に需要の多いTwitterを例に、基本的なWeb APIの利用法を紹介しよう。

画像表示の演出としてよく利用されるLightboxだが、多彩な派生バージョンが存在し、要件にマッチするものを選ぶのには苦労する。そんなときは、jQueryを利用して自作してみるのも手だ。

01

まずはscriptタグでjQueryをロード。Lightbox本体となるlightbox.js、CSSもロードしよう【1-1】。展開元になるHTMLを作成する。サムネイル画像に大きい画像のリンクを張り、それをulでリスト化したもので構成しよう【1-2】。

【1-1】JavaScript,cssの読み込み

【1-1】CJavaScript,cssの読み込み

【1-2】Lightboxを開く画像リスト

02

lightbox.jsを記述していく。まずはDOMツリー構築後に処理されるように$(function(){と});で全体を囲んでおこう【2-1】以降、すべてのJavaScriptはこの中に記述することにする。

【2-1】DOMツリー構築後に処理をするため、以降のJavaScriptはこの内側に記述する

03

各a要素を$gruopとして取得しておき【3-1】、クリックした際の挙動を設定していく。まずはクリックした際に通常の機能が動作しないようにpreventDefaultを実行しておく【3-2】。また、関数の末尾にreturn false;も設定しておこう【3-3】。これでクリックしてもページ遷移が発生しなくなる。

【3-1】画像リストの取得

【3-2】

【3-3】クリックイベントの終端にretutn false;を設定しておく

04

次にクリックされたときの状態を記録しておこう。クリックされたリンクがグループの中の何番目であったかと、グループ内の総数も記録しておく。また、ウィンドウのサイズ、スクロール位置も保存しておく【4-1】。

【4-1】クリック発生時の状態を保存

05

全画面に展開するレイヤーを作っていく。html要素とbody要素にlbActiveクラスを設定する。lbActiveクラスには、 overflow:hiddenが設定されており、レイヤー展開中にスクロールをさせないための設定だ【5-1】【5-2】。

【5-1】htmlとbodyのスクロールを防止

【5-1】overflowの設定

【5-2】overflowの設定

06

続けて背景と写真を表示するためのブロックを生成する。背景はdiv、表示部は前後へ進むボタンと、ローディング表示用の画像を設定しておく【6-1】【6-2】。また、背景、表示部ともにCSS でposition:absoluteとz-index に大きい値を設定しておく【6-3】。

【6-1】Lightboxの背景と表示部を生成

【6-2】

【6-3】Lightboxの基本となるスタイル設定

07

まずは背景を非表示の状態にし、サイズと縦位置を保存しておいたウィンドウサイズと揃え、bodyにアペンドして、フェードインのエフェクトを設定する。続けて背景をクリックした際にレイヤーを閉じるためのクリックイベントも設定する【7-1】。html,bodyに設定したクラスを消去し、展開するレイヤーの双方をフェードアウトが終わった段階で消去するように設定する。

【7-1】背景の初期設定とクリックイベント

08

次に写真表示部だ。背景と同じように非表示にした後、サイズと位置を設定する。最初のサイズは任意でよい。位置はそのサイズと、ウィンドウサイズの差分の半分を設定し、スクロール位置を加算してセンターに表示されるようにする。bodyにアペンドし、フェードインエフェクトを設定しよう。ローディング画像も写真表示部のセンターになるように調整し、前後移動のナビゲーションの横幅は表示部に合わせておく【8-1】。

【8-1】表示部の初期設定

09

画像のローディングを設定していくが、その前にあらかじめ現在時刻を設定しておく。これは特定のブラウザで画像のキャッシュがあった場合にローディングイベント等が発生しない状態を回避するのに、画像のロードごとに違う数値をパラメータとして設定するためだ。img要素にはcurrentImageというidを設定し、クリック対象のhref要素にキャッシュ回避の現在時刻を?でつないだ文字列をsrcとして設定する【9-1】。

【9-1】キャッシュ回避用の現在時刻と画像の生成

10

ロードイベントでは、まずローディング画像を非表示に、#Imageにアペンドしてフェードインエフェクトを設定する。表示部のサイズを読み込まれた画像サイズに揃え、ウィンドウサイズとの差分をとってセンタリングしなおし、ナビゲーションの幅も揃える【10-1】。

【10-1】ロードイベント

11

最後に前後へ進むボタンの設定をしよう。まずはaリンクのpreventDefaultとreturn false;を設定して標準動作を無効化する【11-1】【11-2】。。ローディング画像を再表示し、表示部に対してセンタリングする【11-3】。次の写真の指定は冒頭で保存したcurrentIndexを、Nextをクリックした場合はインクリメント、Prevの場合はデクリメントすることで行い、0を下回る場合は最大値を、枚数を超える場合は0を指定することでループを実現している【11-4】。