2013年9月21日 4:24 PM  カテゴリー: javascript, jQuery, Tips, web制作

もう使われつくして今更感も満載なんですが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を使用。
オプションに関してはかなりいろいろありますので本サイトを見てご自身でいろいろ試していただいてお好みで使用してください。

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

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter