jQuery Masonryをあらためて。

LINEで送る
Pocket

もう使われつくして今更感も満載なんですがDemoページをせっかく作ったので。このブログのトップページのようにjquery infinite scrollにも対応しているようです。
今回はやっていませんので使いたい方はGoogle先生にお尋ねください。

今回デモページには個人的に一番お気に入りのモーダル系fancyboxも合わせて使用しています。そのうちもっとカスタマイズした状態で書くかも知れませんが今回はMasonry × fancyboxということで行きます。

以下サンプルページ
http://gallery-lounge.com/demo/masonry/

Masonry
Masonry

fancybox
http://fancybox.net/

head

fancyboxに関してはダウンロードしたフォルダに入っているfancybox/をそのままアップロードするのが一番楽です。パスはご自分の環境に合わせて書き換えてください。
Masonryに関しても最新バージョンはmasonry.pkgd.min.jsになっています。

html

Masonryを適用したい親要素にid、内包する子要素にclassを任意で。画像サイズをここで入れてもいいですが今回はcssで指定しています。
classにつけたtall、wideは画像の大きさによって分けたいのでそれぞれ振り分けています。
fancyboxを適用したい画像にはa要素を以下のように。
・rel=”group”でnext/prev表示
・a href=”拡大画像”
・img src=”サムネイル画像” ここではレイアウト時に表示される画像

css

#mas-content:ブラウザ左右センター合わせ
#.mas-item:それぞれの間隔。※いらないかも。
.tallと.wide:それぞれの要素のサイズを指定。※指定しないとリロードしたりするとレイアウトが崩れます

js

画像データを読み込み後にレイアウトを組んでほしいのでimagesLoaded.jsを使用。
オプションに関してはかなりいろいろありますので本サイトを見てご自身でいろいろ試していただいてお好みで使用してください。

ブラウザサイズを変えるとアニメーションでレイアウトが組みなおされます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<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="">