jquery.collageCaption:ブラウザサイズに合わせた可変グリッドを表示するJs



ブラウザサイズに合わせた可変グリッドを表示します。
サムネイル画像を表示させるのがメインそうですが、
コレ系って何年か前位からありますよね。

1.CSSの記述例

以下色々変更してみて下さい。

<style type="text/css" media="all">
html body{
	margin:0;
	padding:0;
	background-color:rgb(230, 230, 230);
}
.footnote{
	font-family:arial;
	color:#333333;
	padding:10px;
	font-size:12px;
}
.footnote a{
	color:#09f;
	text-decoration:none;
}
.ie-warning{
	padding:10px;
	color:#000;
	background-color:#FFF;
	margin:10px;
	text-align:center;
}
.Collage{
	padding:10px;
}
.Collage img{
	margin:0;
	padding:0;
	display:inline-block;
	vertical-align:bottom;
	opacity:1;
	border:6px solid #FFF;
}


.Image_Wrapper{
	opacity:0;
	-moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
	box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.Caption{
	font-size:14px;
	font-weight:normal;
	font-family:arial;
}
.Caption_Content{
	color:#FFF;
	padding:20px;
}
</style>

2.読込むJsとJavaScriptの記述例

IE9の場合はjQueryのバージョンがちょっと古い方がイイっぽです。

<!--[if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--<![endif]-->
<script src="jquery.collagePlus.js"></script>
<script src="jquery.removeWhitespace.js"></script>
<script src="jquery.collageCaption.js"></script>
  
  <script type="text/javascript">
$(window).load(function () {
	$(document).ready(function(){
		collage();
		$('.Collage').collageCaption();
	});
});

function collage() {
	$('.Collage').removeWhitespace().collagePlus(
		{
		'fadeSpeed' : 2000,
		'targetHeight' : 200
		}
	);
};
 
var resizeTimer = null;
$(window).bind('resize', function() {
	// hide all the images until we resize them
	$('.Collage .Image_Wrapper').css("opacity", 0);
	// set a timer to re-apply the plugin
	if (resizeTimer) clearTimeout(resizeTimer);
	resizeTimer = setTimeout(collage, 200);
});

</script>

3.HTMLの記述例

<div class="Collage">
<div class="Image_Wrapper" data-caption="350-150"><a><img src="images/350-150.gif"></a></div>
<div class="Image_Wrapper" data-caption="320-180"><a><img src="images/320-180.gif"></a></div>
<div class="Image_Wrapper" data-caption="320-300"><a><img src="images/320-300.gif"></a></div>
<div class="Image_Wrapper" data-caption="472-500"><a><img src="images/472-500.gif"></a></div>
<div class="Image_Wrapper" data-caption="540-360"><a><img src="images/540-360.gif"></a></div>
<div class="Image_Wrapper" data-caption="800-600"><a><img src="images/800-600.gif"></a></div>
<div class="Image_Wrapper" data-caption="400-120"><a><img src="images/400-120.gif"></a></div>
<div class="Image_Wrapper" data-caption="300-300"><a><img src="images/300-300.gif"></a></div>
<div class="Image_Wrapper" data-caption="320-500"><a><img src="images/320-500.gif"></a></div>
<div class="Image_Wrapper" data-caption="450-300"><a><img src="images/450-300.gif"></a></div>
<div class="Image_Wrapper" data-caption="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"><a href="http://www.blinderhidden.com/" target="_blank"><img src="images/blinderhidden.jpg"/></a></div>
</div>
<h1 class="footnote">複数サムネイルをブラウザサイズに合わせた可変グリッド表示</h1>

jquery.collageCaption:ブラウザサイズに合わせた可変グリッドを表示するデモページ

ソース元:jQuery CollagePlus – an image gallery plugin by Ed Lea

ちょっと前から思ってるんですがコレ系って、
SEO的にあまり宜しくない様な気がしてならない。
やり方次第なんでしょうがメンテナンスや更新が面倒そうですし…