[JS]グリッドに沿ったアニメーションが面白い、HTML5ベースの画像ギャラリーのスクリプト -Mosaiqy

サイト構築 -JavaScript

Post on:2011年7月1日

sponsorsr

サムネイル画像がグリッドに沿って縦横にアニメーションでスライドする画像ギャラリーを実装するjQueryのプラグインを紹介します。
画像はFlickr, Instagramなどを利用することも可能です。

Mosaiqy
デモ

[ad#ad-2]

画像ギャラリーは各サムネイル画像をクリックすると、グリッドがアニメーションし拡大画像の領域を確保し、画像を表示します。

画像拡大時のデモ

また、サムネイル画像の配置も自由に調整できます。
上：3x4、下：4x3、他にも6x2, 12x1にデモを変更できます。

サムネイル表示を4x3にしたデモ

Mosaiqyの利用可能なサービス

画像は共有サービスのものを利用することもできます。

Mosaiqyの実装

実装の準備

IEのHTML5用と必要な外部ファイルを準備します。
HTML5を使用するにあたっては、「HTML5 boilerplate」を参考にしてください。

<!doctype html>
<!--&#91;if lt IE 7&#93;> <html class="no-js ie6" lang="en"> <!&#91;endif&#93;-->
<!--&#91;if IE 7&#93;>    <html class="no-js ie7" lang="en"> <!&#91;endif&#93;-->
<!--&#91;if IE 8&#93;>    <html class="no-js ie8" lang="en"> <!&#91;endif&#93;-->
<!--&#91;if gt IE 8&#93;><!-->  <html class="no-js" lang="en"> <!--<!&#91;endif&#93;-->
<head>

もし、「modernizr」を使用しない場合は、下記のコードを使用します。

<head>
    <!--&#91;if lt IE 9&#93;>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"> </script>
        <script src="http://jdbartlett.com/innershiv/innershiv.js"> </script>
    <!&#91;endif&#93;-->
    <script>
        (function(doc) { 
            doc.className = doc.className.replace(/(^|\b)no\-js(\b|$)/, 'js');
        }(document.documentElement));
    </script>
    ...
</head>

最後の外部ファイルを指定します。
パフォーマンスを考慮するなら、スクリプトはドキュメントの下部に記述するのがよいでしょう。

<link rel="stylesheet" media="screen" href="lib/lib-css/mosaiqy.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"> </script>
<script src="lib/mosaiqy-1.0.0.min.js" id="mosaiqy-tpl"></script>

Mosaiqyの使い方

Mosaiqyではグリッドを動的に生成するため、スクリプトで記述します。

<script src="lib/mosaiqy-1.0.0.js" id="mosaiqy_tpl">
    <div>
        <figure><a href="images/zoom/${img}"><img src="images/thumb/${img}" longdesc="...">
          <figcaption>${desc}</figcaption></a>
        </figure>
    </div>
</script>

<script>
$(document).ready(function() {
    $('.mosaiqy').mosaiqy({
        template  : "mosaiqy_tpl",
        ...
        data      : [
            { img : "1.jpg", desc: "Rifugio «Città di Fiume»" }
            ...
        ]
    });
    
});
</script>