画像情報ファイルにEXIFデータが加わったので、これを読み込んで画像と合わせてEXIFデータも表示するように改良する。基本的にはこれまでと同じで、
- 画像情報ファイルを読み込んで画像の位置と各種情報を得る
- 上パネルにサムネイルをカルーセル形式で表示
- 中央パネルに原画像を表示
- 左パネルにEXIFデータを表示[今回実現]
- ナビゲーションボタン(再生・停止など)でスライドショーを実行
の機能を実現する。
実行例:ximgview05.html (まだナビゲーションボタンの動作が不安定なので注意)
EXIFデータの表示には、jQuery EasyUI の PropertyGrid を利用する。
- 項目数が多いためグルーピングを実施する
グルーピングするには、項目定義用のJSONファイルでグループ名を指定する。これにより同じグループに属するものがまとめて表示される。(=ファイルで記述した順序は無視されてグループごとに並び替えられる。)
[ {"name" : "Make" , "value" : "(init)" , "group" : "Camera"}, {"name" : "Model" , "value" : "(init)" , "group" : "Camera"} ]
各行の「index」はファイルで指定した順に付与される。このindexを使って後で値を書き換えるのだが、書き換え後は「グルーピングを保持したままindex順に行が並び替えられる」ため、グルーピングがおかしくなってしまう。(バグなのか仕様なのかは不明。)そのため、JSONファイル作成時にグループごとに並び替えることで対応する。
上の例では、上の例では、’Camera’と’Image’が折り畳まれている。最初のグループ(Camera)を折り畳むには、以下のようにする。
$("#pgExif").propertygrid("collapseGroup", 0);
2番目の引数がグループのインデックスで、’0′により最初のグループを指定している。
先の「グループの折り畳み」といった処理は、読み込み完了後に実施する必要があるが、プラグイン側から通知を受ける方法がわからないため、とりあえずタイマー機能を使って対応中。
$('#pgExif').propertygrid({ url: '/json/grid_rowname_picture.json', // 項目定義ファイル showGroup: true, scrollbarSize: 0 }); //$('#pgExif').propertygrid('collapseGroup', 0); // ↑ファイルの読込が完了していないため、このタイミングで実行しても期待どおり動かない。
実行例2:EXIFデータのグループ(Image)を開いたところ
実行例3:スライドショー実行中 (画像の切り替えと同時にEXIFデータの内容も変わる)