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

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

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

jQuery&jKitで「ライトボックス機能」を実装する - jQueryのチュートリアル

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

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

このレッスンでは 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 と 設定していますね このようにすることで…

目次