なんかもうカッコイイ!フルスクリーン画像ギャラリー「jmFullWall」
そんなのを作りたい方多いのではないでしょうか。
jmFullWall | FullZoom Portfolio with jQueryを利用すれば、簡単にこれが導入できてしまいます。
sponsors
使用方法
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」サンプル
sponsors
記事作成:2011年9月29日 10:04
記事URL:http://www.skuare.net/2011/09/jmfullwall.html
TOP > javascript > なんかもうカッコイイ!フルスクリーン画像ギャラリー「jmFullWall」
前の記事:切り替え時のエフェクトが面白い画像ギャラリーJavaScript「Jquery Slider with transition effects」
次の記事:全画面スライドを可能にするJavaScript「FerroSlider jQuery Plugin」
あなたにはこちもお勧め!
jQuery プラグインまとめ!