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

LINEで送るボタンの設置方法LINEで送るボタンの設置方法について前のページ

テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」次のページSquishy

関連記事

  1. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  2. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  3. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  4. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP