zoomGallery JavaScript Library

Apple.comサイト内でイメージ拡大表示があり、エフェクトやユーザーインターフェースなど参考にすべき要素が豊富に含まれています。同様の拡大表示をJavaScriptで実装するには、多くのコードを作成する必要があります。簡単に優れたインターフェースを取り入れられるように、zoomGallery.jsプロジェクトを開始。リリース時期は年内を予定

Apple.comの写真ギャラリー表示
各イメージをクリックすると、イメージが拡大アニメーションをしながら表示されます。また、表示する際にウインドウサイズに合わせて、表示サイズの調整が行われます。

zoomGallery.jsで対応する部分は、HTMLタグで指定されたイメージやコンテンツ要素に対して、リンク先などをレイヤー表示する部分となります。拡大アニメーションにも対応します。

Apple.com - Mac OS X Leopard - Features

閉じるボタンの位置
ユーザー操作を左右するインターフェース部分ですが、Apple.comでは左上に閉じるボタンを表示しています。MacOSのインターフェースに類似する操作のため、このような位置に表示していると考えられます。

感覚的に右側へ配置した方がインターフェース上、利用しやすくなります。操作用のボタンなどの配置は右側をデフォルトに設定し、OSに応じて表示位置を変えるオプション機能の実装も予定しています。

対応ブラウザ
Apple.comではIEで表示した場合、アルファチャンネルを含むPNG画像では透過されずに表示してしまいます。ドロップシャドウも同様に透過PNGが利用されており、対応しているブラウザだけ表示されるようになっています。

zoomGallery.jsはIE6.xにも対応し、アルファチャンネルを含むPNG表示をサポートします。また、背景のドロップシャドウも同様に対応します。

その他の機能
1. コンテンツのスクロール対応
拡大表示中にコンテンツスクロールが行われた場合にも、表示位置の調整が行われるようになります。内部的にはwrapScrollの機能を搭載予定。

2. スライドショー対応
複数の写真イメージを連続して表示するスライドショー機能を搭載します。一度に多くの写真を見せたい場合に便利な機能で、多くのスライドショー表示ライブラリが対応しています。

サポートと機能要望
機能要望やご質問などございましたら、メールにてご連絡ください。
youmos.com@gmail.com