[JS]Video Wall状に配置した画像を拡大表示するスクリプト -Slidawall

Video Wall状に配置した画像をアニメーションで拡大表示し、ディスクリプションを表示する機能も備えたjQueryのプラグインを紹介します。

Slidawall

[ad#ad-2]

デモでは画像の枚数が少ないのですこし面白みに欠けますが、基本機能は体験できます。

デモページ

各画像をマウスクリックすると、画像をアニメーションで拡大表示し、下部にディスクリプションを表示します。

左下画像をクリックすると、左下からずずっと拡大

画像の枚数を増やしても、同様に動作します。

画像を16枚に

[ad#ad-2]

Slidawallは2タイプ用意されています。

• 画像の拡大表示のみ
• 画像の拡大表示+ディスクリプション表示

設置は簡単で、ダウンロードフィルの「libフォルダ」をコピーし、「example」内のHTMLの画像を変更するだけです。
HTMLは下記のようにシンプルなものになっています。

HTML: example/simple.html

<section id="example-1">
    <article data-image="img/1.jpg"></article>
    <article data-image="img/2.jpg"></article>
    <article data-image="img/3.jpg"></article>
    <article data-image="img/4.jpg"></article>
    <article data-image="img/5.jpg"></article>
    <article data-image="img/6.jpg"></article>
</section>

※Video Wall状に配置するため、画像の枚数に制限があります。