photowall

JavaScript

Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「photowall」

Google画像検索のようなアニメーションを実装することができるjQueryプラグイン「photowall」がよかったのでご紹介します。サムネイル画像をクリックすると、その画像詳細がスライドダウンして表示されます。画像を扱うWebサービスなんかと相性がとてもよさそうですね。

[ads_center]

使い方

このようにGoogleで画像検索している時のようなアニメーションを実装することができます。これは便利ですね。

photowall

jQuery本体とダウンロードしたプラグインをhead内に読み込みます。

<link rel="stylesheet" href="photowall/jquery.photoWall.css">
<script src="photowall/jquery-1.9.1.min.js"></script>
<script src="photowall/jquery.photoWall.min.js"></script>

画像のマークアップはこんな感じで記述します。スライド時に表示される内容は、pw-image-descというクラス名をつけたタグ内に記述していきます。

<div class="photowall">
    <div class="pw-slide">
        <img class="pw-image" src="画像パス" />
        <div class="pw-image-desc">
            <!-- スライドで表示される内容 -->
        </div>
    </div>
    <!-- 中略 -->
</div>

あとはphotowallを呼び出すだけです。シンプルですね。

<script>
jQuery(document).ready(function($) {
    jQuery(".photowall").photoWall();
});
</script>

オプションも色々あるので詳しくは公式サイトで確認できます。

関連記事

  1. LoadGo

    JavaScript

    画像をプログレスバー(ローディング)にできるjQueryプラグイン「LoadGo」

    LoadGoはサイト内にあるロゴなどといった画像をプログレスバー(ロー…

  2. jQuery Pretty Dropdowns
  3. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

  4. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  5. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP