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

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像をクリックすると、拡大する機能を実装します。まずは実装してみましょう。
講師:
08:34

字幕

このレッスンではjQuery プラグインによる画像のポップアップを実装していきましょう。それではまず完成のファイルを見てみましょう。final のフォルダーの中のindex.html をGoogle Chrome で開きます。開いたら企業情報のページに飛びましょう。企業情報のリンクをクリックするとこのように会社概要のページに飛びますがここにフォトギャラリーという項目があります。この写真を一度左クリックしてみましょう。このように、写真が同じ画面でポップアップしてきます。こちらの右上の Close ボタンを押したり黒い部分、背景をクリックすると写真は消えるようになっています。4枚設定してあります。こちらを作っていきましょう。それではフォルダーに戻ってbegin のフォルダーをSublime Text にドラッグアンドドロップします。そして今回実装するのはcompany のフォルダーの中のindex になります。company の中の index.html をダブルクリックで開いておきましょう。さて今度は Chrome に切り替えてjQuery プラグインをダウンロードしにいきましょう。検索のタブを開いて、こちらに colorbox という風に単語を打ち込んだらEnter で検索をします。 そうすると1番上に ColorboxjQuery lightboxといったようなページが出てくるかと思いますのでこちらをクリックします。そうするとこの作者の解説及びダウンロードのサイトが出てきます。大抵の jQuery にはこのようにデモが用意されていてデモをクリックするとこのように作者が用意してくれているサイトでサンプルを確認することができます。今回は Download というリンクがあるのでこちらをクリックしてみましょう。Download ボタンを押すとダウンロードが開始されると思います。ダウンロードが完了したらFinder で表示、ダウンロードしたフォルダーをまず確認しましょう。ダウンロードフォルダーにはこのようにcolorbox-master.zip というのが出来ているのでこちらを解凍しましょう。zip を解凍するとこのようにフォルダーが出てきます。中身を確認しておきます。中身には沢山ファイルが入っています。実は colorbox に使う矢印の画像データだったりとかexample 使用例のフォルダーが5つもあったりとかREADME 説明書きがあったりとかします。この中から本当に必要なファイルだけを自分のフォルダーに入れないとファイルサイズが重くなってしまうのでここから必要なファイルだけを抽出しましょう。 まずプラグインの名前のJavaScript は必須です。こちらに colorbox-min.js があります。ほぼ同じ名前ですが、min の方がサイズが軽いのでこちらのコピーを取ってそして begin のフォルダーの中のcompany のフォルダーの中に新規フォルダーを作ってjs という名前を付けてその中にペーストをしておきましょう。今回は company というカテゴリでしか使わないスクリプトなのでcompany フォルダーの中に新しく js フォルダーを作ってそちらに移動しました。そしてダウンロードしたフォルダーの方にフォーカスを合わせて今回は example3 というものの中からimages と css をコピーしましょう。この2つを選択してコピーそしてフォルダーに移動したらこの company の中にcss フォルダーを新しく作りましょう。css と、これも company でしか使わない css なのでここに css フォルダーを新しく作ってここにペーストをしましょう。images は css で読み込むためのイメージなので今回は css と同じ階層で構いません。それではこちらを Sublime Text で読み込んであげましょう。 まず新しく css が増えたのでcss のリンクを増やしましょう。こちらのリンクタグのエリアに新しくリンクタグを作ります。この時に Sublime Text の機能でここで Enter を押してみましょう。このようにあらかた必要な情報が入ります。そして css フォルダーの中のcolorbox.css が必要です。そして今度は JavaScript を読み込みましょう。スクロールをしてscript のエリアに来たら、この common.js のエリアをコピーしてペーストをして複製を取ります。後はこのリンクのパス、つまりファイルの場所が1階層上には戻らないですね。今回は新しく作った js フォルダーにそのまま降りていけばいいのでjs フォルダーの中のjquery.colorbox-min.jsということになります。こちらは少し長いので、打ち間違いの可能性があります。なのでファイル名をコピーアンドペーストでも構いません。これで準備は整ったのですが、後はポップアップにしたい場所をスクリプトで特定してあげるだけです。予めスクリプトタグを1セット作って終了タグを書いたら、$ でセレクターを作りましょう。 $('.company-gallery というセレクターの中に実は写真が入っているのでcompany-gallery の中のここがポイントで、リンクの a が終点になります。アンカータグに対してこの colorbox という命令を掛けます。そして括弧を付けてセミコロンで閉じます。つまりセレクターを選んだらcolorbox というプラグイン名と一緒のメソッドで実行するという風にしてあげないと、動いてくれません。では上書き保存をして、このファイルを右クリックからOpen in Browser で開いておきます。Open in Browser でbegin のファイルが開かれたらスクロールをしてフォトギャラリーの写真をクリックしてみましょう。クリックしたらこのように写真がちゃんと拡大されたかと思います。それでは一度Sublime Text に戻ってその写真のエリアも確認しておきましょう。このようにフォトギャラリーのエリアには大きい画像へのリンクタグの a でそしてその中にイメージ画像が入っているのですがその画像はサムネイル用の小さい画像になっています。つまり小さい画像に大きい画像へのリンクを貼っているというものが4セットあってそれに対して colorbox を掛けたという仕組みになっています。 このレッスンではjQuery プラグインによる画像のポップアップを作りました。

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

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

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

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

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

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