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>

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

ミラーレス一眼とかに最適なJOBYの超小型の三脚「ゴリラポッド マイクロ800」前のページ

Photoshopで目的の被写体以外の背景をぼかすやり方次のページPhotoshopで背景をぼかすやり方

関連記事

  1. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  2. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  3. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  4. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  5. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  6. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

コメント

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

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

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP