WebデザイナーのためのjQuery実践講座

jQuery&jKitで「ライトボックス機能」を実装する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryとjKitプラグインを使って、実際に「ライトボックス機能」を実装する方法について、解説致します。
講師:
03:26

字幕

このレッスンでは jQuery と JKit プラグインを使って― 実際にライトボックス機能を 実装する方法について解説していきます まずは ダウンロードしてきた こちらの lightbox-js ― というフォルダーの中に入っている こちらのindex.html ファイルと― そして こちらの js フォルダーの 中に入っている― この javascript.js ファイルをエディッターで開いてください そして これらがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの解説を― 進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは 前回までのレッスンの おさらいをしておきましょう 前回までのレッスンでは こちらの部分の HTML コーディング― 及び CSS コーディングを行いましたね 今回はこちらのそれぞれの イメージタグに対して― ライトボックス機能を実装する方法を 見ていきたいと思います それでは こちらの javascript.js ファイルを― 開きます すると このような画面になりましたね 今回 注目して頂きたい部分は― こちらの部分となります では 順番に見ていきましょう まずは ドルマークと書いて― この括弧の中にそのライトボックスの 機能を付けたい要素を指定してあげます ここでは photoGallery という ID の付いたセクションタグの中にある― ul タグの中にある 更に li タグの中にある img タグ― というような指定となっていますね そして その img タグに対して .jkit と書いて― 括弧 括弧閉じるの セミコロン そして この jKit の括弧の中の 引き数には まず一つ目はライトボックス― そして二つ目はこのように speed 200 と書いた― 波括弧を入れています まずこちらの jKit は これまで通り jKit の機能を利用する為の命令ですね そして こちらの一つ目の引き数には その jKit の利用したい― 機能を指定してあげます ここでは ライトボックスですね そして カンマと書いて その後の二つ目の引き数は こちらのライトボックスの 設定項目を記入しています 今回は speed 200 と 設定していますね このようにすることで ライトボックスがフェードインして― 表示されてくるスピードを 0.2 秒と指定することができます このように一文を記述することによって ライトボックスの機能の実装は完了となります とてもシンプルに実装することが可能ですね それでは この状態で index.html ファイルをブラウザで開いて― 動作を確認してみたいと思います はい これが その index.html ファイルをブラウザで開いた状態です それで は 各写真を それぞれクリックしてみましょう すると このようにライトボックスで そして 少し大きめの画像が表示されてきましたね そして このバツ印をクリックすると ライトボックスを閉じることができます そしてこちらの写真も同様ですね こちらの写真も同様です このように表示されてくれば  きちんとライトボックスの実装が― 完了しているといった形になります 以上でレッスンは終了です 今回は jQuery と JKit プラグインを使って― 実際にライトボックス機能を 実装する方法について解説いたしました 以降のレッスンからは jQuery を使って― マウスオーバー効果を実装する方法について 解説していきますので― そちらも合わせてご覧ください

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

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

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

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

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