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

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

  2. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  3. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  4. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  5. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

コメント

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

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

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP