*

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

公開日: : 最終更新日:2015/10/29 jQuery ,

今回使用する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

スポンサードリンク

関連記事

catejQuery

透明度を少しづつ変更する fadeTo()

fadeTo()は、セレクターで指定した要素の 透明度(CSSのopacityプロパティ)を、設定

記事を読む

jQuery

Masonryのギャラリーにフィルター機能を追加する

Masonryのギャラリーにフィルターを付けてみました。実行結果を見て頂ければ分かりますが、画像のギ

記事を読む

jQuery

ついてくるヘッダーメニューを作成する

タイトルの通りです。画面をスクロールしてもついてくるメニューを今回作成します。 サンプルコードの実

記事を読む

jQuery

Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる

前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。 サン

記事を読む

catejQuery

水平方向のアコーディオンメニュー

今回紹介するのは横にスライドする アコーディオンメニューです。 実行結果はこちら

記事を読む

jQuery

ボタンにカーソルを乗せたとき色々と効果を付けてみる

今回は、ボタンに色々な効果を付けてみます。サンプルコードの実行結果はこちら サンプ

記事を読む

catejQuery

処理のタイミングを決めるイベントについて

jQueryを使ったコードは、セレクターで特定の HTML要素を指定して、CSSやHTMLを変更・

記事を読む

catejQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。 今回はその逆、親要素を取り除いたり、 要素を置き換えたり

記事を読む

catejQuery

jQueryのセレクター2 eq/lt/gt/headerセレクター

前回に引き続きjQuery独自の セレクターについて紹介します。 eq/lt/gtセレクター

記事を読む

jQuery

CSSプロパティの設定と値の取得

jQueryで、シンプルにCSSのプロパティの値を設定したり、取得したりできます。CSSを操作すると

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑