今回使用するjQueryプラグイン
●Masonry
フレキシブルなレイアウトを生成するために使用するjQueryプラグインです、幅、高さが異なるコンテンツを領域ぴったしに並べるためのものです。
●imagesLoaded
画像の読み込みを見張るJavaScriptライブラリで、作者は上述のMasonryと同じ人です。今回はたくさん画像を扱うので、画像の読み込みが完了しない内に、JavaScriptが実行されると、読み込み途中の画像が表示されたり、画像サイズを取得できずにレイアウトができないというような不具合が出てきます。それを防ぐために「imageLoaded」というプラグインを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
*{margin:0;padding:0;} ul li{list-style-type:none;} /* Page main */ .main { margin: 0 auto; /* 内側に設ける余白 上、左右、下 */ padding:20px 10px 40px; width:100%; background-color:aquamarine; } .galleryItem{margin-top:8px;} /* 読込中の画像は見えないようにする */ .isLoading{opacity:0;} |
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ギャラリーページを作ってみる</title> <script src="js/jquery-1.11.3.js"></script> <script src="js/ui/jquery-ui.js"></script> <link rel="stylesheet" href="style.css"> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/masonry.pkgd.min.js"></script> <script src="js/gallery.js"></script> </head> <body> <div class="main"> <ul class="gallery" id="gallery"></ul> </div> </body> </html> |
gallery.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
$(function(){ $("#gallery").each(function(){ var $container = $(this); /* Masonryを使うためのオプションを設定する */ $container.masonry({ //コラムの幅 columnWidth:230, //ガター(コラム間の左右に設ける幅) gutter:10, //アイテムに当たる「要素のセレクター」指定 itemSelecter:".galleryItem" }); /* $.getJSONメソッド() 第1引数：JSONファイルのURLを指定すると、 サーバーに対してそのファイルをリクエスト(要求)し、 そのリクエストが成功した場合、サーバーが該当のURLの データを返します。 第2引数：レスポンスがあり次第実行する関数を 指定します。この関数はサーバーから帰ってきたデータを 引数として受け取ります。 content.jsonデータ形式が変数dataに入っています。 data[0],data[1].images.thumbという書式で content.jsonファイル内のデータを抽出できます。 */ $.getJSON("./data/content.json",function(data){ /* ループの中で生成したDOM要素を格納する。 */ var arrElement = []; /* jQueryオブジェクトのループ処理を行うメソッドとして each()メソッドを使ってきましたが 今回はただの配列なので、eachメソッドは使えません。 このような時は、$.each()メソッドを使います。 data内の要素ごとに処理を実行 iは0から始まる要素のインデックスです。 itemはその要素の値です。 */ $.each(data,function(i,item){ //配列要素からHTML文字列を作る。 var itemHTML = '<li class="galleryList isLoading">' + '<a href="' + item.images.large + '">' + '<img src="' + item.images.thumb + '" alt="' + item.title + '">' + '</a>' + '</li>'; /* JavaScriptのpush()メソッドで 配列arrElementに追加します。 変数itemHTMLの値をそのまま格納するのではなく、 $(itemHTML)で、上記で格納した文字列を jQueryオブジェクトに変換して、get(0)メソッドを 読み出してみます。 get()メソッド jQueryオブジェクトからDOM要素を取り出すメソッド 引数の0は jQueryオブジェクトに含まれるDOM要素の うち最初の要素 を表しています。 今回だと、$(itemHTML)はli要素が１つしか 格納されていませんので、その要素が戻されます。 $(itemHTML)に複数の要素が含まれる場合は、 この引数にインデックスをしていることで 任意の要素を抽出することができます。 */ arrElement.push( $(itemHTML).get(0) ); }); //上記で編集した配列arrElementをDOMに格納 $container.append(arrElement); /* 画像の読み込みが完了したとき Masonryレイアウトを読みだす imagesLoaded()は要素内の画像を全て 読み込んで、読み込みが完了したとき、 引数として渡した関数を実行するメソッドです。 */ $container.imagesLoaded(function(){ //読込中を表すclass="isLoading"を削除 $(arrElement).removeClass("isLoading"); /* masonryを実行する 第1引数："appended"というキーワードの文字列 第2引数：新たに追加するDOM要素 */ $container.masonry("appended",arrElement); }); }); }); }); |
読み込んでいる.JSONファイルについて
ギャラリーページの中身の元となるデータです、
データはサンプルファイル内の「data」フォルダの
中にあるcontent.jsonというファイル名です。
このファイルはJSON(JavaScript Object Notation)という
データ形式です。
JSONはデータ形式のひとつで、javaScriptに限らず色々と
利用されています。
content.jsonをテキストエディタで開くと全体が
[ ]で囲まれた配列です。配列の各要素は{ }で囲まれた
オブジェクトで、各オブジェクトのプロパティは
「title」「images」があって、
「images」は「thumb」「large」の２つのデータを持っています。
下記のようにテキストデータがなっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
[ { "title": "Oshu", "images": { "thumb": "img/s1.jpg", "large": "img/b1.jpg" } }, { "title": "Bazzar in Samarqand", "images": { "thumb": "img/s2.jpg", "large": "img/b2.jpg" } }, { "title": "Bishkek", "images": { "thumb": "img/s3.jpg", "large": "img/b3.jpg" } }, { "title": "Chol Pon Ata", "images": { "thumb": "img/s4.jpg", "large": "img/b4.jpg" } }, { "title": "Chol Pon Ata", "images": { "thumb": "img/s5.jpg", "large": "img/b5.jpg" } }, { "title": "Samarqand", "images": { "thumb": "img/s6.jpg", "large": "img/b6.jpg" } }, { "title": "Oshu", "images": { "thumb": "img/s1.jpg", "large": "img/b1.jpg" } }, { "title": "Chol Pon Ata", "images": { "thumb": "img/s7.jpg", "large": "img/b7.jpg" } } ] |
| プロパティ | 説明 |
|---|---|
| "title" | 画像のタイトル |
| "images" | "thumb","large"という２つのデータを持つ入れ物 |
| "thumb" | 縮小版画像のURL |
| "large" | 拡大版画像のURL |