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

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  2. Rainbow.js
  3. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  4. stickUp
  5. Jqx-Media-Slider
  6. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

コメント

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

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

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP