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

tilamicjs Javascript

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

この記事ではタイルに現在表示されている画像がどれかという情報を取得する'.getCurrentImgID()'メソッドについて解説します。
この記事の内容はtilamic.js Method-getcurrentimgidとほぼ同じです。

'.getCurrentImgID()'メソッドはその名の通り現在タイル上に表示されている画像を特定する情報を返します。

書式

.getCurrentImgID(index)

引数のindexはタイルの通し番号です。tilamic.jsの仕組み上すべてのタイルに同じ画像が表示されているとは限らないためindexの指定によりどのタイルの情報を取得するのかを指定します。デフォルトは0(左上のタイル)です。

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

<div id="tiles" style="width: 60%;" 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>
Current imgID is '<span id="showImgID"></span>'
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles', {
			'aspectRatio': 853/ 1280
		});
		
		var imgID = 1;
		setInterval(function(){
			tilamic.flip(imgID % 4);
			imgID++;
			setTimeout(function(){
				$('#showImgID').text(tilamic.getCurrentImgID());
			}, 100);
		}, 3000);
	});
</script>