<< スライドショーを行うjQuery Blinds | main | MacでMAMPを使ってPHPの開発環境を構築 >>

可変グリッドのvgridというjQuery

2013.08.17 Saturday | by こも
可変グリッドレイアウトのvgridを使ってみました。

ブラウザのサイズに合わせて自動的に並べ替えてくれるjQueryです。
アニメーションによる整列機能もあって、見栄えはいい感じです。



せっかくなので、画像のサムネイル表示をやってみました。


1.vgridをダウンロード

vgridの公式サイトからダウンロードしてきます。

vgridを使うには、jQuery本体とjquery.easingも必要なようです。


2.headに必要なファイルのパスを通す

  <script language="Javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.easing.min.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.vgrid.min.js"></script>


3.任意のクラスをセットして、vgridをロード。

ここではクラス名をgrid-contentにしました。

<script type="text/javascript">
$(function(){

	var vg = $("#grid-content").vgrid({
		easing: "easeOutQuint",
		useLoadImageEvent: true,
		useFontSizeListener: true,
		time: 400,
		delay: 20,
		wait: 500,
		fadeIn: {
			time: 500,
			delay: 50
		},
	});
	$(window).load(function(e){
		vg.vgrefresh();
	});
});
</script>


4.divタグをセットし、画像をセット

	<div id="grid-content">
		<div>
			<img src ="myimage/pict01.jpg" border="0">
			<p>ビーチ</p>
		</div>
		<div>
			<img src ="myimage/pict02.jpg" border="0">
			<p>カヤック</p>
		</div>
	</div>



これらの処理をひとまとめにします。

<html>
<head>
  <script language="Javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.easing.min.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.vgrid.min.js"></script>
<style type="text/css">

<!-- 枠に幅と色などをセット -->
#grid-content {
	width: 100%;
}
#grid-content div {
	width: 200px;
	height: 240px;
	border: 1px solid #000000;
	background-color: #FFFFFF;
	color: #000000;
	margin: 5px;
	padding: 3px;
}
</style>

<script type="text/javascript">
$(function(){

	var vg = $("#grid-content").vgrid({
		easing: "easeOutQuint",
		useLoadImageEvent: true,
		useFontSizeListener: true,
		time: 400,
		delay: 20,
		wait: 500,
		fadeIn: {
			time: 500,
			delay: 50
		},
	});
	$(window).load(function(e){
		vg.vgrefresh();
	});
});
</script>

</head>
 
<body>
	<div id="grid-content">
		<div>
			<img src ="myimage/pict01.jpg" border="0">
			<p>ビーチ</p>
		</div>
		<div>
			<img src ="myimage/pict02.jpg" border="0">
			<p>カヤック</p>
		</div>
		<div>
			<img src ="myimage/pict03.jpg" border="0">
			<p>海の中</p>
		</div>
		<div>
			<img src ="myimage/pict04.jpg" border="0">
			<p>海草</p>
		</div>
		<div>
			<img src ="myimage/pict05.jpg" border="0">
			<p>夕日</p>
		</div>
		<div>
			<img src ="myimage/pict06.jpg" border="0">
			<p>ヒトデ</p>
		</div>
		<div>
			<img src ="myimage/pict07.jpg" border="0">
			<p>ハイビスカス</p>
		</div>
		<div>
			<img src ="myimage/pict08.jpg" border="0">
			<p>夜景</p>
		</div>
		<div>
			<img src ="myimage/pict09.jpg" border="0">
			<p>海岸</p>
		</div>
	</div>


</body>
</html>


設置サンプルはこちらになります。

Comment
Add Comment









Sponsored Link
Recommend
PHP 逆引きレシピ (PROGRAMMER'S RECiPE)
PHP 逆引きレシピ (PROGRAMMER'S RECiPE) (JUGEMレビュー »)
鈴木 憲治,安藤 建一,山田 直明,八木 照朗,山本 義之,河合 勝彦
Recommend
Recommend
Powered
無料ブログ作成サービス JUGEM