NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

画像を範囲に合わせて縮尺を変え、トリミングと上下左右中央揃えをしてくれる「imgLiquid」

2013年4月12日jQueryプラグイン活用

キラッと光るボタン

たくさんの不特定サイズ画像を、均一サイズのサムネイルで並べたい時などに有効です。

デモページ

JavaScript

(function($){
	$(function(){  
		$('.thumbnail a').imgLiquid({ fill:true, fadeInTime:300 });			
	});
})(jQuery);

HTML

<div class="type">
	<div class="img">
		<a href="#"><img src="img01.png" alt="220x356(元画像)" /></a>
		<span class="caption">220x356(元画像)</span>
	</div>
	
	<div class="img thumbnail">
		<a href="#" class="trimming200x200"><img src="img01.png" alt="200x200" /></a>
		<span class="caption">200x200</span>
	</div>
		
	<div class="img thumbnail">
		<a href="#" class="trimming150x250"><img src="img01.png" alt="150x250" /></a>
		<span class="caption">150x250</span>
	</div>
</div>
<div class="type">
	<div class="img">
		<a href="#"><img src="img02.png" alt="元画像" /></a>
		<span class="caption">350x232(元画像)</span>
	</div>
	
	<div class="img thumbnail">
		<a href="#" class="trimming200x200"><img src="img02.png" alt="200x200" /></a>
			<span class="caption">200x200</span>
	</div>
		
	<div class="img thumbnail">
		<a href="#" class="trimming300x200"><img src="img02.png" alt="300x200" /></a>
		<span class="caption">300x200</span>
	</div>
</div>

CSS

.type:after {
	display : table;
	clear : both;
	content : '';
	margin-bottom: 30px;
}
.img {
	margin-right: 30px;
	float: left;
}
.img .caption {
	display: block;
	padding-top: 6px;
	font-size: 10px;
	color: #777777;
	text-align: center;
}
.thumbnail a {
	display: block;
	overflow: hidden;
}
.thumbnail .trimming200x200 {
	width: 200px;
	height: 200px;
}
.thumbnail .trimming150x250 {
	width: 150px;
	height: 250px;
}
.thumbnail .trimming300x200 {
	width: 300px;
	height: 200px;
}

配布元

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 画像を範囲に合わせて縮尺を変え、トリミングと上下左右中央揃えをしてくれる「imgLiquid」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com