skuare.net

フルスクリーンで画像を並べ、クリックすると拡大画像を表示する。
そんなのを作りたい方多いのではないでしょうか。
jmFullWall | FullZoom Portfolio with jQueryを利用すれば、簡単にこれが導入できてしまいます。

使用方法 jmFullWall | FullZoom Portfolio with jQueryからファイル一式をダウンロードします。
<link rel="stylesheet" href="jmFullWall.css" media="all" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.imgpreload.js"></script>
<script type="text/javascript" src="jquery.imagepanner.js"></script>
<script type="text/javascript" src="jquery.jmFullWall.js"></script>
<script>
$(function(){
$('#wall').jmFullWall({
itemsForRow : 5, //列で表示するアイテム
itemTransition : 'slideDown', //アイテムのエフェクト
itemTransitionSpeed : 150, //エフェクトスピード
detailTransitionIn : 'slideDown', //詳細のエフェクトIN
detailTransitionOut : 'slideUp' //詳細のエフェクトOUT
});
});
</script>
上記のようにぐっと記述したら、表示させたい画像を下記のようにすれば完成です。
<div id="wall-top">
<h1>タイトル</h1>
</div>
<div id="wall-container">
<div id="wall-loading"></div>
<div id="wall-detail"></div>
<div id="wall">
<div id="wall-items">
<div class="wall-item">
<span class="bg hide">画像パス1</span>
<span class="img_detail hide">画像パス1</span>
<span class="tooltip hide">テキスト1</span>
<a href="#"><span class="title">テキスト1</span></a>
</div>
<div class="wall-item">
<span class="bg hide">画像パス2</span>
<span class="img_detail hide">画像パス2</span>
<span class="tooltip hide">テキスト2</span>
<a href="#"><span class="title">テキスト2</span></a>
</div>
<!-- 以下、画像分 -->
</div>
</div>
</div>
なんかもうカッコイイ！フルスクリーン画像ギャラリー「jmFullWall」サンプル