bl6.jp

jQueryプラグイン「Justified Gallery」を使えば、サムネイル画像のサイズを調整してくれて綺麗に隙間を詰めて並べてくれるギャラリーを実装することができます。マウスオーバーでキャプションが表示され、画像にはリンクも貼ることができます。

[ads_center]

Justified Galleryの使い方

jQuery本体を読み込んでいる状態で、以下のプラグインファイルを読み込みます。

<link rel="stylesheet" href="css/jquery.justifiedgallery.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.justifiedgallery.js"></script>

次に画像をマークアップしていきます。サムネイルにしたい画像をimgのsrcに指定。aのhref属性にはオリジナルサイズ画像へのリンクを指定します。

<div id="mygallery" >
  <a href="オリジナルサイズの画像パス" title="タイトル1">
    <img alt="タイトル1" src="サムネイル画像パス"/>
  </a>
  <a href="オリジナルサイズの画像パス" title="タイトル2">
    <img alt="タイトル2" src="サムネイル画像パス"/>
  </a>
  <!-- 中略 -->
</div>

あとはJustified Galleryを呼び出すだけです。

$("#mygallery").justifiedGallery();

オプションも色々と用意されています。jQueryプラグインを使ってイメージギャラリーを実装したい時には選択肢の一つとしてよさそうですね。

Justified Gallery