①ギャラリーページの全体像

ギャラリーページの主な機能
・サムネイル画像を自動的にグリッド上に並べて表示する
・各サムネイル画像がクリックされるとより大きなサイズの画像を表示する
・外部ファイルからデータを取得する
・表示するアイテムを絞り込める「フィルタリング機能」を加える

②シンプルなギャラリーページの作成

※$.get.JSON()メソッドで外部ファイルを読み込む
※MasonryとimagesLoadedというライブラリを使用する

※$.get.JSON()メソッドはユーティリティ関数

ユーティリティ関数とは
jQueryオブジェクトを操作するのではなく、
Javascriptの配列やオブジェクトといったデータなどを扱うためのメソッド※$.getJSON()やjQuery.getJSON()の様に$やjQueryに対して呼び出す形で使用する

※push()メソッドで追加する

※get()メソッドで呼び出す

get()メソッドとは
jQueryオブジェクトからDOMエレメントを取り出すメソッド

※imagesLoaded()メソッドで画像を読み込む

imagesLoaded()メソッドとは
要素内のすべての画像を読み込み、
読み込み完了すると、引数に渡した関数を実行するメソッド

③フィルタリング機能を持つギャラリーページの作成

※.slice()メソッドで配列を新しくする

.slice()メソッドとは
配列から任意の要素を切り出した新しい配列を返すメソッド

※.replace()メソッドで文字列を置き換える

.replace()メソッドとは
任意の文字列を検索し置き換えるメソッド

構文 .replace()メソッド
replace( 検索する文字列または正規表現パターン, 置換する文字列 )

正規表現の基本
正規表現はJavascriptだけでなくほとんどのプログラミング言語で利用可能

正規表現とは
文字列のパターンを表現する方法

※val()メソッドで属性値を取得する

val()メソッドとは
input要素やselect要素、textarea要素といった
フォームのコントロールの値を取得するメソッド

※$.grep()メソッドで該当するアイテムのデータを配列から抜き出す

$.grep()メソッドとは
jQueryのメソッドで、配列から条件に合致する要素だけを抽出するメソッド

④選択画像の拡大機能とキャプションの追加

※ColorboxというjQueryプラグインを使用して実装する

⑤マウスの移動方向によるホバーエフェクト機能の追加

通常の関数と即時関数の違い
通常の関数では関数を実行した後に関数を呼び出す

例
function 関数名() {
　処理
}
関数名();

即時関数では関数を定義すると同時にその場ですぐに呼び出される

構文 即時関数
(function() {})

例
(function 関数名() {
　処理
})();

※outerWidthメソッドとouterHeightメソッドで要素の幅と高さを取得する

outerWidthメソッドとは
要素の幅を取得するメソッド

outerHeightメソッドとは
要素の高さを取得するメソッド

⇒サンプル・デモサイトはこちら

⇒【公式】jQuery 最高の教科書の購入はこちら