マス目状の画像ギャラリーを作成できるjQueryプラグイン「Mosaiqy: a nice jQuery plugin」

画像ギャラリーを使用する際に、多くの画像を一覧で見せたいという希望があるかもしれません。
従来までのものだと、初期時にあまり多くを非表示できませんでした。
そこで、一度に多くの画像を見せられるjQueryプラグインMosaiqy: a nice jQuery pluginを紹介します。

sponsors

使用方法

Mosaiqy: a nice jQuery pluginからファイル一式をダウンロード。
まずhead内に下記を記述します。

<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
<script>
    (function(doc) { 
        doc.className = doc.className.replace(/(^|\b)no\-js(\b|$)/, 'js');
    }(document.documentElement));
</script>
<link rel="stylesheet" href="mosaiqy.css" />
さらにギャラリーを表示させたい場所に以下の記述。

<div class="loading mosaiqy">
    <ul></ul>
</div>
そして最後に表示させたい画像とjsを書いていきます。

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script src="mosaiqy-1.0.0.min.js" id="mosaiqy_tpl">
    <div>
        <figure><a href="大きい画像のディレクトリまでのパス/${img}">
          <img src="小さい画像のディレクトリまでのパス/${img}" longdesc="...">
          <figcaption>${desc}</figcaption></a>
        </figure>
    </div>
</script>

<script>
$(document).ready(function() {
    $('.mosaiqy').mosaiqy({
        template  : "mosaiqy_tpl",
            rows            : 3, //1行の表示画像枚数
            cols            : 3, //1列の表示画像枚数
        data      : [
            { img : "1.jpg", desc: "キャプ1" }, //画像のパスとキャプション
            { img : "2.jpg", desc: "キャプ2" },
            { img : "3.jpg", desc: "キャプ3" }
        ]
    });
});
</script>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors