JavaScript + jQueryで作るLightbox

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

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

ぜひご覧ください。

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

字幕

このレッスンでは Lightbox を実装するにあたりJavaScript と jQuery を利用してトリガーボタンをクリックすることによりLightbox を表示させる方法について解説いたします。まずはダウンロードしてきたこの「 show_lightbox 」こちらの中に入っているこれらの3つのファイルをエディタで開いてください。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。さて Lightbox を表示させるプログラミングを書いていくにあたりまず先に HTML のソースコードを再度確認しておきましょう。まずは Lightbox を表示させるボタンですね。これはこちらの id="trigger" という属性が付いたボタンタグとなります。そしてその表示させたいLightbox 本体はというとこの div id ="lightbox" になりますね。これらを頭に入れた状態で早速プログラムの方を書いていきたいと思います。それでは「 javascript.js 」を開きます。今「 javascript.js 」の中身はこのようになっていますのでこの部分を削除しておきます。 それではまず先ほどのボタンですね、あれをクリックしたら何かの動作を起こすといったようにクリックイベントをこのボタンに登録しておきましょう。クリックイベントをボタンに登録するにはまず $ そして ()そしてこの中にそのボタンのセレクターを書いておきましょう。ここでは butoon そして id がtrigger でしたね、trigger と書きます。こちらの # は id を意味します。そしてこの ) のあとに .そして on と書きます。そして ()そしてまずこの on の引数の始めに'' で囲って click と書いておきます。このようにすることでこのボタンがクリックされたらという意味になりますね。そしてこのあとに ,そしてこのあとに function () の{} と書きます。そして最後のこちらの ) の後に ;を打っておきましょう。これでこの trigger という idの付いたボタンをクリックしたらこの function の {} の間に書かれた処理を実行するというイベントを登録することができました。では具体的にこちらの function の{}の中を書いていきたいと思います。こちらの中で改行を数回入れてまずはこのように書いていきます。 $() this と書いて .blur と書いて () の ;そして最後のこちらの行に return falseと書いておきます。こうすることによってこのボタンをクリックしたときに映るフォーカスを外してボタンをクリックしたときに発生するデフォルトの動作をこの return false で無効化しています。そしてこの blur と return false の間に今回実行させたい処理のプログラムを書きます。今回実行させたいプログラムはLightbox の表示ですねそれでは早速書いてみたいと思います。まずは $() そしてこの () の中にdiv#lightbox と書きます。この # は id を意味するマークでしたね。ですので id lightbox が付いた divという意味になります。そしてこの ) の後に .そしてここでは fade 大文字 I の In +そして (); と書きます。この fadeIn はその名前の通りにこちらに書いた要素要するに Lightbox ですね、こちらをフェードインして表示させるという意味になります。そしてこの fadeIn の () の中引数には透明の状態から表示されてくるスピードを指定することができます。 ここでは 500 と書いておきましょう。こうすることで 500 ミリ秒の時間をかけてフェードインしてくるという意味合いになります。それではこの状態で「 javascript.js 」のファイルを保存します。そして「 index.html 」をブラウザで開いて確認してみましょう。こちらのファイルをブラウザで開きます。するとこのように表示されてきますねでは早速こちらのボタンをクリックしてみましょう。するとこのようにフェードインしてLightbox が表示されてきましたねそれではエディタに戻ります。このように書くことでLightbox の表示させるプログラムが完了いたしました。実は思いのほかそれほど難しくないというのが分かっていただけたかと思います。以上でレッスンは終了です。今回は JavaScript と jQuery を使ってトリガーボタンにクリックイベントを登録して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宛までご連絡ください。