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. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  2. SVG 3D Tag Cloud jQuery Plugin
  3. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

  4. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  5. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  6. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP