tilamic.jsの使い方その７・'.resize()'メソッド

tilamicjs Javascript

今回も引き続きtilamic.jsの解説記事です。

この記事ではタイルが表示されるエリア(以下単にエリア)の大きさを再計算する'.resize()'メソッドについて解説します。
この記事の内容はtilamic.js Method-resizeとほぼ同じです。

'.resize()'メソッドはエリアの横幅にあわせてエリアの縦幅、および各タイルの大きさを再計算します。
そのためこの機能を有効に使うにはエリアの横幅をパーセントで指定したうえで、Tilamicオブジェクト作成時に'aspectRatio'オプションを指定しておく必要があります。
通常このメソッドはウィンドウリサイズイベントに関連付けて使用することになります。

書式

.resize()

このメソッドはいかなる引数もとりません。

このメソッドにはタイルの'isActive'の状態に影響されず常にすべてのタイルに対して適用されるという特徴があります。
'.filter()'メソッドと組み合わせて一部のタイルだけ大きさを変えることはできないということです。

動作デモ
(動作の様子はこちらでご覧いただけます。)

<div id="tiles" style="width: 60%; margin-top: 0;" class="preview">
	<img src="../img/photo1.jpg" alt="photo1" />
	<img src="../img/photo2.jpg" alt="photo2" />
	<img src="../img/photo3.jpg" alt="photo3" />
	<img src="../img/photo4.jpg" alt="photo4" />
</div>
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles', {
			'aspectRatio': 853/ 1280
		});
		
		$(window).on('resize', function(e){
			tilamic.resize();
		});
		
		var imgID = 1;
		setInterval(function(){
			tilamic.flip(imgID % 4);
			imgID++;
		}, 2000);
	});
</script>