jQuery APIでWebサイトを演出しよう

画像のポップアップを作ってみよう 2

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オプションを変更したり、CSSをによって見た目をカスタマイズしてみましょう。
講師:
09:39

字幕

このレッスンではjQuery プラグインによる画像のポップアップを更にカスタマイズしていくことを学びます。それでは begin と final をまずは見比べてみましょう。それでは begin のフォルダーを開いてcompany のフォルダーを開いてcompany の中の index.html をGoogle Chrome で開きます。そしてスクロールをしてフォトギャラリーの写真のサムネイルを一度クリックしてみましょう。このように黒背景で黒淵で写真が表示されるようになっています。それではフォルダーに戻りまして、今度はfinal のフォルダーの中にあるcompany のフォルダーの中に入ってそしてその中にある index.html をGoogle Chrome にドラッグアンドドロップして開きましょう。そしてスクロールをしてフォトギャラリーにカーソルを合わせると画像にマウスホバーによるエフェクトが掛かっているのとクリックしたときに背景が白、そして淵が緑になっています。そして画像も緑になっていますね。このように同じプラグインを利用してもカスタマイズをすることで雰囲気をガラッと変えることが可能になります。 この調整の仕方を学んでいきましょう。それではフォルダーに戻りましてbeginn のフォルダー、こちらを丸ごと Sublime Text に落として開きます。そうしたら comapny のフォルダーの中のindex.html をダブルクリックで開きましょう。開いたらすでにこちらにはcolorbox による実装がされていますがそちらにオプションを記述していきましょう。163行目にcompany-gallery a をcolorbox にしてくださいというような命令があると思いますがこの colorbox のすぐ後ろの括弧の中にカーソルを入れてまず波括弧を入れましょう。そしてここの中で Enter を押してここにオプションを記述していきます。ではまず speed: 300 と入力して一度上書き保存をしましょう。そして Google Chrome に戻ってbegin になっていることを確認して更新。そしてフォトギャラリーをクリックすると先程よりも少し速く画像が開いたと思います。では Sublime Text に戻りましょう。この speed は画像と画像の切り替え間のスピードをコントロールするオプションです。 ではカンマを打って、今度はopacity と入力をして: 0.5 と入力しましょう。そして上書き保存をします。そしてブラウザーを開いて更新をしてクリックをしてみましょう。先程よりも背景の黒い部分が薄くなったと思います。実はこの opacity は背景の色の透明度の設定になります。続いてまたオプションを記述しましょう。Sublime Text に戻ってopacity の後にカンマそして rel:そして文字列を入力するので必ずクォーテーションで囲んであげるのが文字列のルールです。そして appendix という風に文字列を打ちましょう。実はこの appendix は上にスクロールしたこのフォトギャラリーのエリアの所で使います。この a というタグがあるかと思いますがa タグが終わる直前のこの括弧の内側にrel="appendix" と入力しましょう。ここはスペルに気を付けてください。この rel は関連しているということなのですがこちらを同様に他の a タグの jpeg の後ろにこのようにペーストをして行きます。実はこれでグルーピングができるんですね。ここまでできたら上書き保存をしてブラウザーで表示をして更新をしてみましょう。 更新をしたら写真をクリックします。そうすると先程までは出ていなかったこの矢印が出現します。これは rel 属性を同じだけ付けたやつがグループになって4枚の内の1枚2枚と表示もされるように変わります。そしてまたSublime Text に戻ります。今度はホバーによるエフェクトを追加しておきましょう。まずはホバーをつかさどる js はどこにあるかというと、サイドバーの js フォルダーの中のcommon.js になりますのでcommon.js をダブルクリックで開きます。そうしたらコメントがあるのでこのマウスホバーで半透明にするのエリアのセレクターに追記をしましょう。nav の a ということで追記する時はこのようにカンマで区切りを入れて.company-gallery とそしてその中の a も半透明にしたいという風にして上書き保存をして、ブラウザーで開き更新をして写真にマウスを重ねたらこのように半透明になるというので、オッケーです。それでは Sublime Text に戻って今度は背景の色や枠の装飾の方を変えていきましょう。実はこれは company フォルダーの中にある css の中に入っているcolorbox.css で制御がされてるのでこちらをダブルクリックでcolorbox.css を開きます。 これはダウンロードした時から付いているデフォルトのスタイルシートなのですが注意書きが書いてあります。まず上のエリアは Core Style でいじらないほうがいいですよという風に書いてあるのでそのままスクロールをしてUser Style という風にコメントがあります。ここから先はいじっても大丈夫ですということでこの background の色が実は背景の色になっていますのでここを 000 が真っ黒なのでここを fff 真っ白に変えて保存。そしてブラウザーに切り替えて更新をしてみましょう。そして写真をクリックすると背景が薄い白になりました。では Sublime Text に戻って今度はボーダーの色を変えてみましょう。ここに boxLoadedContentborder 5 ピクセルとあります。こちらの色をサイトのメインカラーである色に変更してみます。000 を消して、009b72 として上書き保存をしてブラウザーで確認。更新を押して、そして写真をクリックすると枠の色が緑に変わりました。後はこの矢印の画像を緑にしたいと思います。こちらはフォルダーを開いてみましょう。フォルダーのbegin フォルダーの中を開いてそして company のフォルダーを開いてcss のフォルダーを開いて、更にimages のフォルダーを開きます。 ここに実は矢印の画像が2つ入っていましてこの controls というのはデフォルトであるもの。そしてこの緑の画像はPhotoshop や Illustrator で色を変えて作り直したものです。こちらを Sublime Text の css で読み込んであげましょう。ではスクロールをすると、controls という所があります。実はこの controls を今回新しく作ってある modify の方に変更しましょう。この -modify をコピーしてcontrols の後ろに付けてあげます。付けてあげたら上書き保存をしてブラウザーに切り替えて、更新。そして写真をクリックしてみましょう。そうするとこのように別のコントロール画像が呼び出されたということになります。このように css と画像を組み合わせることでも既存のプラグインを変更することができます。このレッスンではjQuery プラグインによる画像のポップアップのカスタマイズについてご紹介しました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

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

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

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

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