前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。
サンプルコードの実行結果はこちら
今回使用したプラグイン
・Masonry
・colorbox
・imagesloaded
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 |
*{margin:0;padding:0;} ul li{list-style-type:none;} .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .pHeader{ background-color:white; margin:0 auto; width:100%; position:fixed; z-index:5; } .inner{ width:100%; padding: 8px 10px; margin: auto; } .main{ margin:0 auto; padding: 100px 10px; width:100%; } .filterForm{float:right;} .filterForm label{ font-weight:bold; cursor:pointer; margin-right:60px; padding:0 0.1em; -webkit-user-select:none; } label.ui-state.focus{outline:1px solid;} label .ui-icon{ background:url(img/sprites.png) no-repeat 0 0; width:17px; height:17px; margin-right:0.5em; margin-top:2px; vertical-align:top; display:inline-block; } .filterForm label.ui-state-active .ui-icon{ background-position:-20px 0; } .loadMore{ background-color:white; border:1px solid #f0f0f0; display:block; padding:1em 0; width:100%; margin-top:10px; } .galleryItem{margin-top:10px;} .galleryItem a{display: block;} .galleryItem .caption{display:none;} .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; } |
index.html
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Masonryギャラリーをクリックすると画面全体を半透明にしたり、キャプションをつけてみる</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> <link rel="stylesheet" href="colorbox.css"> <script src="js/jquery.colorbox-min.js"></script> <script src="js/galleryFillterCapMa.js"></script> </head> <body> <header class="pHeader"> <div class="inner clearfix"> <h1><a href="#">Gallery Test</a></h1> <!-- 画像をフィルタリングするためのフォーム --> <form class="filterForm" id="galleryFilter"> <span class="formItem"> <input type="radio" name="filter" id="filterAll" value="all" checked> <label for="filterAll">All</label> </span> <span class="formItem"> <input type="radio" name="filter" id="filterUz" value="Uzbekistan"> <label for="filterUz">Uzbekistan</label> </span> <span class="formItem"> <input type="radio" name="filter" id="filterKy" value="kirgis"> <label for="filterKy">Kyrgis</label> </span> <span class="formItem"> <input type="radio" name="filter" id="filterKa" value="Kazakhstan"> <label for="filterKa">Kazakhstan</label> </span> <span class="formItem"> <input type="radio" name="filter" id="filterRu" value="Russia"> <label for="filterRu">Russia</label> </span> </form> </div> </header> <div class="main"> <ul class="gallery" id="gallery"></ul> <!-- 画像を追加で読み込むボタンを表示 --> <button class="loadMore" id="loadMore">More</button> </div> </body> </html> |
galleryFillterCapMa.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 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 |
$(function(){ $("#gallery").each(function(){ var $container = $(this), //追加ボタン $btnLoadMore = $("#loadMore"), //フィルタリングに使用するフォーム $filter = $("#galleryFilter"), //一度に表示する画像の数 itemNum = 4, //表示済の画像の数 doneNum = 0, //JSONデータを格納 arrData = [], //フィルタリングされたJSONデータを格納 filteredData =[]; $container.masonry({ columnWidth:230, gutter:10, itemSelector:".galleryItem" }); //JSONデータを取得し、initGallery関数を実行 $.getJSON("./data/content.json",initGallery); //ギャラリーを初期化 function initGallery(data){ //取得したJSONデータを格納 arrData = data; /* JSONデータを別の変数にも格納 フィルタリングされた際の データを保持するために使う */ filteredData = arrData; //まずは、アイテム(画像)リストを表示 addItem(); /* 追加ボタン「More」をクリックしたら アイテムリストを表示させるようにする */ $btnLoadMore.on("click",addItem); /* フィルターのラジオボタンが変更された filterItem関数を実行するように設定 */ $filter.on("change",'input[type=radio]',filterItem); } //アイテムリストを作成し、ドキュメントに挿入 function addItem(filter){ var arrElement =[], slicedData = filteredData /* slice()メソッド 配列から任意の要素を切り出した配列を返します。 第1引数:指定した番号の要素から 第2引数:指定した番号の「前」の要素まで slice(0,6)と書けば、配列1番目から6番目を返す。 */ .slice( doneNum , doneNum + itemNum ); //配列sliceDataの各要素ごとにDOM要素を作成 $.each( slicedData,function(i,item){ var itemHTML = '<li class="galleryItem isLoading">' + '<a href="' + item.images.large + '">' + '<img src="' + item.images.thumb + '" alt="">' + '<span class="caption">' + '<span class="inner">' + '<b class="title">' + item.title + '</b>' + '<time class="date datatime="' + /* replace(" "," ")メソッド 第1引数:検索する文字列or正規表現のパターン 第2引数:置換する文字列 「/-0?/g」はitem.date内の 「-0」又は「-」という文字列を 「/」に置換します。 */ item.date.replace(/-0?/g,'/') + '</time>' + '</span>' + '</span>' + '</a>' + '</li>'; /* itemHTMLに格納された文字列を jQueryオブジェクトに変換して get(0)メソッドでDOM要素として取り出す。 そして配列にっ格納する。 push()メソッド: 引数を配列の最後に格納する */ arrElement.push( $(itemHTML).get(0)); }); $container .append(arrElement) .imagesLoaded(function(){ $(arrElement).removeClass("isLoading"); $container.masonry("appended",arrElement); //フィルタリングの時は再配置する if( filter ){$container.masonry();} }); /* 今回はここから追加 addItem()関数でギャラリーのアイテムが ページに追加されたときに、そのアイテムからa要素を 選択して,colorboxメソッドを呼ばれるように設定 */ $container.find("a").colorbox({ maxWidth:"960px", maxHeight:"95%", title: function(){ return $(this).find(".inner").html(); } }); /* 今回はここまで追加 */ //追加済の画像の数を更新 doneNum += slicedData.length; /* 追加済みの画像の数と、フィルタリングされた 画像の数を比べている */ if( doneNum < filteredData.length ){ /* フィルタリングされた画像の数が多いなら Moreボタンを表示する */ $btnLoadMore.show(); }else{ $btnLoadMore.hide(); } } function filterItem(){ //チェックされたラジオボタンのvalue属性値を格納 var key = $(this).val(), masonryItem = //追加済アイテム $container.masonry("getItemElements"); //追加済アイテムを削除 $container.masonry("remove",masonryItem); /* フィルタリングされたアイテムと 追加済みの数値を格納している変数を初期化 */ filteredData =[]; doneNum = 0; if( key == "all" ){ /* all にチェックされている場合 全てのJSONデータを格納 */ filteredData = arrData; }else{ /* all以外にチェックがされている場合 キーと一致するデータを抽出 $.grep()メソッド 第1引数:検索対象の配列 第2引数:条件となる関数 */ filteredData = $.grep(arrData,function(item){ return item.category === key; }); } /* Masonryの再配置をするためにやる= 126行目の処理 */ addItem(true); } }); }); $(function(){ $('.filterForm input[type="radio"]').button({ icons: { /* ラジオボタンを変更しやすくするために class名を付すことができます。 */ primary: 'icon-radioBtn' } }); }); |