スポンサーリンク
スポンサーリンク

Masonryでギャラリーページを作ってみる

今回使用するjQueryプラグイン

●Masonry
フレキシブルなレイアウトを生成するために使用するjQueryプラグインです、幅、高さが異なるコンテンツを領域ぴったしに並べるためのものです。

●imagesLoaded
画像の読み込みを見張るJavaScriptライブラリで、作者は上述のMasonryと同じ人です。今回はたくさん画像を扱うので、画像の読み込みが完了しない内に、JavaScriptが実行されると、読み込み途中の画像が表示されたり、画像サイズを取得できずにレイアウトができないというような不具合が出てきます。それを防ぐために「imageLoaded」というプラグインを使用します。

index.html

gallery.js

読み込んでいる.JSONファイルについて

ギャラリーページの中身の元となるデータです、
データはサンプルファイル内の「data」フォルダの
中にあるcontent.jsonというファイル名です。
このファイルはJSON(JavaScript Object Notation)という
データ形式です。

JSONはデータ形式のひとつで、javaScriptに限らず色々と
利用されています。
content.jsonをテキストエディタで開くと全体が
[ ]で囲まれた配列です。配列の各要素は{ }で囲まれた
オブジェクトで、各オブジェクトのプロパティは
「title」「images」があって、
「images」は「thumb」「large」の2つのデータを持っています。
下記のようにテキストデータがなっています。

プロパティ 説明
“title” 画像のタイトル
“images” “thumb”,”large”という2つのデータを持つ入れ物
“thumb” 縮小版画像のURL
“large” 拡大版画像のURL

コメント

タイトルとURLをコピーしました