jQueryを使ってやったこと。

タイル状に画像を表示するためにisotopeを使う

Isotopeを使って。 トップページでデモっぽいのがあるけど、すごくかっこいい。 ブラウザの大きさにあわせて変えてくれる。

ソート機能もついてるらしい。

使い方とかはちゃんと書いてるけど
Introduction · Isotope Docs

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

に対して

$('#container').isotope({
  // options
  itemSelector : '.item',
  layoutMode : 'fitRows'
});

のように指定すれば、こんな感じのやつができる。

他にもいろいろなやり方ができます。

tooltipsを綺麗に表示できるtipsyを入れる

画像にマウスが乗っかると、そのつぶやきが表示できるようにしたくて、いろいろ探していたら、Clipieのやつがカッコ良かったので実装しようと思ったけど、挫折。

住人の皆さんに助けを求めたところ、以下のプラグインを教えてもらいました。

tipsy

titleタグにtooltipsに表示させたい文章を入れて、そのtitleタグの1つ上位のタグまでを指定してあげます。

例えば、

<div id="container">
  <div class="item">
    <a href="hogehoge" title="foo"><img border="0" src="hoge.png" height="128" ></a>
   </div>
</div>

というコードのaタグにあるtitleをtooltipsとして表示させたい時、

$("#container .item a").tipsy()

と指定してあげる事でtooltipsとして使用することが可能です。

表示の位置とかもオプションで指定できるようです。

tipsy