『MegaZine 3』 ページ内にZOOM機能を追加する

クールなページフリップ (ページをペラペラとめくるアクション) を簡単に実現してくれる Page Flip Engine 『MegaZine 3』 の zoom 機能についてご質問いただいたので 1 ページだけ zoom 機能を追加した Demo ページを作ってみました。

MegaZine 3 zoom 機能 Demo (ページをめくると裏にも写真があります)

なお、この zoom 機能は Picasa でエクスポートさせることが出来ないので、Picasa でエクスポートされた megazine.xml を編集するか、もしくはイチから自分で megazine.xml を作るかのどちらかになります。

ここでは Picasa でエクスポートした megazine.xml をテキストエディタ等で編集し、サムネイルも同じく Picasa でエクスポートしたものをそのまま使っています。
拡大画像に関しては Picasa でエクスポートされた images フォルダ内に手作業で拡大写真を格納しています。

作業自体は難しくないのですが、megazine.xml 内の記述がひと文字でも間違っていると Error になりますので、一言一句正確に記述しましょう。

あと、拡大画像のファイルサイズが大きすぎると Load に時間が掛かりますので、あまり欲張りすぎないほうがいいようです。

『MegaZine 3』 の megazine.xml を編集しZOOM機能を追加する方法

上の Demo の 1 ページ目 (Santiburi Resort :: Samui Island) の megazine.xml (<page> から </page> の記述のみ) は以下のように記述されています。

Demo の megazine.xml のすべてをご覧になりたい方はここをクリック

		<page>
<img width="500" height="500">
<src lang="ja">../images/page-santiburi.jpg</src> ページ全体に使用している背景画像の指定
</img>
<img src="../thumbnails/7455.jpg" left="178" top="80" hires="../images/7455.jpg" iconpos="left" gallery="santiburi" overlay="none" width="144" height="96"/> ひとつめのサムネイル
<img src="../thumbnails/7381.jpg" left="178" top="210" hires="../images/7381.jpg" iconpos="left" gallery="santiburi" overlay="none" width="144" height="96"/> ふたつめのサムネイル
<img src="../thumbnails/7465.jpg" left="178" top="340" hires="../images/7465.jpg" iconpos="left top" gallery="santiburi" overlay="none" width="144" height="96"/> みっつめのサムネイル
		</page>

zoom 機能を追加するには <img src= から始まる行を megazine.xml に記述する必要があり、そこにはサムネイルのファイル指定、サムネイルが表示される位置の指定、拡大写真のファイル指定、拡大アイコンの表示位置の指定、拡大したときに連続して見られるグループの指定、サムネイルの幅と高さの指定が書かれています。

ページ上でどの記述がどこに該当するのかは、下の画像を参考にして下さい。
画像内で青文字のところは上の XML で青文字にしてあります。

• src=

サムネイルのファイル指定 (相対パス) ＝ サムネイルがどこに格納されているかということ。
私が作った Picasa の HTML テンプレートを利用してエクスポートすると thumbnails というフォルダ内にサムネイルが格納されているので必然的に ../thumbnails/●●●.jpg という記述になります。

• left=

サムネイルの表示位置指定。ページの左端からの距離 (ピクセル) を記述します。

• top=

サムネイルの表示位置指定。ページの上端からの距離 (ピクセル) を記述します。 2 枚目、3 枚目のサムネイルは上端からの距離が1 枚目のサムネイルと違いますので数値も異なっています。

• hires=

拡大画像のファイル指定 (相対パス) = 拡大画像がどこに格納されているかということ。
Demo では Picasa でエクスポートされた images フォルダに手作業で拡大画像を突っ込みましたので ../images/●●●.jpg という記述になります。ご自身で新たにフォルダを新規作成しても構いません。たとえば big というフォルダを作ってそこに拡大画像を入れたとすると ../big/●●●.jpg となります。

• iconpos=

拡大アイコンの表示位置指定。 left と記述すると左下、left top と記述すると左上に表示されます。 iconpos はたぶん icon position の略じゃないですかね、、、たぶん。

• gallery=

拡大画像を表示させると右上に 「次の画像」 に移るためのアイコンが表示されますが、連続して拡大画像を見せたい場合はここで同じ名称を付けておく必要があります。たとえば 1 枚目と 3 枚目に 「 gallery="A" 」 という名前を付けて 2 枚目に 「 gallery="B" 」 という名前を付けた場合、連続して見られるのは同じ名称が付いている 1 枚目と 3 枚目で、2 枚目を見るためには一度フルスクリーンモードをエスケープして通常表示に戻してから 2 枚目のサムネイルをクリックしないと見られません。
それを逆手にとって、まったく違うページに載っているサムネイルに 「 gallery="A" 」 という名称を付けておくと、モニター上に表示されているページにはサムネイルが表示されていないけど、拡大画像では見られるという状態を作ることも可能です。

• overlay=

サムネイルに hover 時の効果を付けられるようです。 none は効果ナシの設定です。
たとえば overlay="color[0.1,0.5,0xFF0000]" と記述すると、何もしない状態で 10% の赤いオーバーレイがかかった状態で表示され、オンマウスすると 50% の赤いオーバーレイがかかった状態に変化するようです。 あわせて border の効果なども指定できるようです。下記のような overlay を指定した Demo をアップしておきましたので参考にして下さい。
1 枚目 :korekore: color[0.1,0.5,0xFF0000]
2 枚目 :korekore: border[0,1,solid]
3 枚目 :korekore: border[0,0.75,solid,0xFF0000,3];color[0.25,0.5,0x6699CC];border

Demo

• width= , height=

サムネイルの幅と高さの指定。