tilamic.jsの使い方その１・オブジェクトの作成と基本の回転

tilamicjs Javascript

昨日公開したtilamic.jsですが、やはり作ったからには使ってもらいたいという思いがありそのためにデモとドキュメントは英語で作成しました。
tilamic.jsのデモとドキュメント

そこでこのブログでは日本語で基本的な使い方を何回かに分けて書きたいと思います。
この内容はtilamic.jsで解説している内容とほぼ同じです。

1.ファイルの読み込み

tilamic.jsの動作にはjQueryが必要です。またjQueryのバージョンは1.8.0以降である必要があります。これは1.8.0以降に搭載されたCSS3のベンダープレフィックスを自動的に付与する機能に依存しているためです。次のようにファイルを読み込んでください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/tilamic.js"></script>
2.HTMLの書き方

HTMLは'div'要素内にタイル化したい画像ファイルを'img'タグで配置します。この'div'タグにCSSで横幅を設定するとその設定はタイル化後も有効です。逆に'div'タグ内の'img'要素に関してはtilamicオブジェクト作成と同時に完全に置き換えられるためいかなるCSS設定も意味がありませんのでご注意ください。

<div id="tiles">
  <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>
3.tilamicオブジェクト(インスタンス)の作成

tilamicオブジェクトの作成はDOMの構築が終了してから行う必要があります。コンストラクタの引数は第一引数がタイル化を行うエリアを指すjQueryセレクタです。第二引数はオプションです。'rows'は縦に何行タイルを設置するかで'cols'は横に何列設置するかです。'aspectRatio'はエリアの横幅に対する縦の長さです。これを指定せずエリアにCSSでheightを指定することもできますが、レスポンシブデザインを採用し、縦横比を維持したまま自動リサイズができるようにするにはheight指定ではなく'aspectRatio'を指定する必要があります。オプションについてはtilamic.js Constructor Optionsで解説しています。また別の記事で日本語の解説記事も書く予定です。

$(document).ready(function(){
  var tilamic = new Tilamic('#tiles', {
    'rows': 3,
    'cols': 5,
    'aspectRatio': 853/1280
});
3-1.自動リサイズを設定する

ブラウザのウィンドウサイズが変更された際に自動でエリアの大きさを調整するように設定することができます。その場合は下のようにwindowのresizeイベント発火時にtilamicオブジェクトの.resize()メソッドを呼び出すようにしてください。なおこの機能を用いるには上で書いたようにエリアの横幅をパーセンテージで指定したうえで、'aspectRatio'を設定しておく必要があります。

$(window).on('resize', function(e){
  tilamic.resize();
});
4.タイルを回転させる

タイルを回転させるメソッドは2つあり、.flip()メソッドと.seqFlip()メソッドです。違いは前者がすべてのタイルが一斉に回転するのに対し、後者は順に回転する点です。
(正確には「すべてのタイル」ではなく「アクティブなタイル」なのですが初期状態ではすべてのタイルがアクティブです。これについては.filter()メソッドを紹介する際に説明します。)
両メソッドとも第一引数は回転後に表示したい画像の通し番号です。この順番は1.で書いたHTML内の'img'タグの順番どおりです。また'img'タグの'alt'属性の名前で呼び出すこともできます。
両メソッドとも第二引数で回転の軸や向きなどいくつかのオプションを受け取ることができますがそれはメソッド紹介の際に説明したいと思います。

tilamic.flip(1); // すべてのタイルが一斉に回転

tilamic.seqFlip('photo4'); // すべてのタイルが順に回転

以上がtilamic.jsの基本的な流れです。
次回はコンストラクタのオプションについてご紹介したいと思います。

ぜひ一度デモをご覧いただき使ってみてください('ω')ノ

ソースコードはGiHubでご覧いただけます。