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 Glow
  2. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  4. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  5. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

コメント

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

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

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP