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

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

[ads_center]

使い方

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

photowall

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

&lt;link rel=&quot;stylesheet&quot; href=&quot;photowall/jquery.photoWall.css&quot;&gt;
&lt;script src=&quot;photowall/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;photowall/jquery.photoWall.min.js&quot;&gt;&lt;/script&gt;

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

&lt;div class=&quot;photowall&quot;&gt;
    &lt;div class=&quot;pw-slide&quot;&gt;
        &lt;img class=&quot;pw-image&quot; src=&quot;画像パス&quot; /&gt;
        &lt;div class=&quot;pw-image-desc&quot;&gt;
            &lt;!-- スライドで表示される内容 --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- 中略 --&gt;
&lt;/div&gt;

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

&lt;script&gt;
jQuery(document).ready(function($) {
    jQuery(&quot;.photowall&quot;).photoWall();
});
&lt;/script&gt;

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

photowall

JavaScript

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

パソコン液晶画面を拭いて綺麗に掃除するためにiBUFFALOの液晶TV専用クリーニングクロスを購入次のページ