Justified Gallery

JavaScript

jQueryプラグインで画像サイズを調整して綺麗に並べてくれるギャラリー「Justified Gallery」

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

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  2. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

  3. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  4. jQuery ui material design datepicker
  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

  6. Before and After image script

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP