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

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

使用方法 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>

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

sponsors

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

記事作成:
記事URL:

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