JavaScript + jQueryで作るLightbox

Lightboxの非表示実装(クリックイベント登録)

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Lightboxの背景にクリックイベントを登録して、Lightboxを非表示にさせる方法について解説致します。
講師:
06:53

字幕

このレッスンでは Lightbox を実装するにあたりJavaScript と jQuery を利用してLightbox を非表示にさせる方法について解説いたします。まずはダウンロードしてきたこの「 hide.lightbox 」というフォルダーの中にあるこれら3つのファイルをエディタで開いてください。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それではレッスンを始めていきましょう。それではまず今回のレッスンの目標を確認しておきましょう。まずはこの状態で「 index.html 」をブラウザで開いてみてください。こちらのファイルをブラウザで開きます。そしてこの「 Lightbox を表示する」ボタンを押します。するとこのように Lightbox が表示されてきますね。今回のレッスンではこちらの黒の透過がかった背景部分、こちらをクリックすることによってこの Lightbox 自体を非表示にする方法について実際にプログラムを書いてみたいと思います。それではエディタに戻ります。それでは実際にプログラムを書いていく前にHTML のコードを再度確認しておきましょう。 今回クリックイベントを登録するのはこちらの Lightbox の背景部分ですね。div id=lb_background という名前の付いたdiv タグです。そして非表示にする Lightbox 本体。それはこちら id=lightbox の付いたdiv タグですね。これを踏まえた上で実際にプログラムを書いていってみましょう。それでは「 javascript.js 」を開きます。そして非表示にするプログラムはこちらの表示処理の下の方に書いていきましょう。それではまず非表示にするクリックイベントを背景に登録したいと思います。このように書いていきます。$() そしてこの () の中にはこのように書きます。div#lb_backgroundと書きます。これで id lb_background の属性を持つdiv を指定したことになりますね。そしてこの () の後に.on()そしてこの on の最初の引数にはイベントの種類を登録します。今回はクリックで Lightbox を非表示にしたいのでここには click と書きます。そして , の function ()そして {}そして最後の () の後ろに ; を付けておきましょう。 こうすることによって lb_background要するに Lightbox の背景部分ですね、ここをクリックするとファンクションのこの{}の中の処理を実行するというイベントを登録することができました。それでは具体的にその実行させたいプログラムを書いていきます。この{}の部分に何行か改行を入れてまずは表示処理の際にも書いたようにこちらにもこのように$(this).blur () の ; そして最後の行には return false と書いておきましょう。そしてこれらの間に実行したい処理を書きます。今回実行したいのは Lightbox の非表示ですねこのように書いていきます。$() そしてこの中に Lightbox の大枠を指定します。div#lightbox ですね。id lightbox という属性を持つdiv タグです。そして .ここで表示の際にはフェードインと書きましたが非表示の際にはその逆で fadeOut と書いときます。そして () の ;こうすることで Lightbox がフェードアウトするという命令が出来上がりました。最後にこちらのフェードアウトの () の中この中にフェードアウトにかける時間を指定します。 今回も表示の際に指定した内容と同じように500 ミリ秒を指定しておきます。それではこの状態で「 javascript.js 」を保存します。そして「 index.html 」をブラウザで確認してみましょう。これをブラウザで開きますとこのような感じで表示されますね。それでは「 Lightbox を表示する」ボタンをクリックします。するとこのように Lightbox が表示されてきました。それではこちらの Lightbox の背景部分黒い透過がかったこの部分ですね。こちらの部分をクリックしてみます。するとこのようにフェードアウトして非表示になりましたね。それではもう一度こちらのボタンをクリックしてみます。すると同じように表示されますね。そして背景部分をもう一度クリックしてみるとこのようにきちんと非表示になりましたね。このように一度イベントを登録しておけば何度でも実行させることが可能です。それではエディットに戻ります。このようにかくことでLightbox を非表示にするというプログラムが完成しました。以上でレッスンは終了です。今回は JavaScript と jQuery を使ってLightbox の背景部分にクリックイベントを登録してLightbox を非表示にさせる方法について解説いたしました。 以降のレッスンでは Lightbox のコンテンツ枠部分をブラウザの表示領域の上下の中心に表示させる方法について解説していきますのでそちらも合わせてご覧ください。

JavaScript + jQueryで作るLightbox

Lightboxとは半透明な黒を背景に四角いウィンドウ内にコンテンツを表示する機能です。このコースではJavaScriptとjQueryを使ってサイトのページにLightboxを作成する手順を解説します。JavaScripとjQueryの説明からHTMLやCSSでのコーディング、そして実際にLightboxの表示を切り替えなどを順を追って解説します。

55分 (12 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年06月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。