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. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  2. Create a month picker jQuery plugin
  3. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  4. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  5. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  6. Smooth Scroll behavior polyfill

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP