ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Googleマップをはじめて見た時の感動は覚えているでしょうか。JavaScriptだけでスムーズに拡大や縮小ができて、さらにマウスでドラッグまでできてしまうユーザビリティの高さに驚きました。

その簡易版とも言える操作を画像に追加してくれるライブラリがjQuery.iviewerです。写真のギャラリーなどに使ってみると面白いのではないかと思います。

サンプルです。画像の上下にツールバーがあります。
サンプルです。画像の上下にツールバーがあります。

プラスボタンを押せば拡大されます。
プラスボタンを押せば拡大されます。

回転もサポートされています。
回転もサポートされています。

縮小もできます。
縮小もできます。

ここまでは画像の表示に関するデモでした。さらにこんなサンプルもあります。

画像を表示しているのはこれまでと同じです。
画像を表示しているのはこれまでと同じです。

リンクで選択したオブジェクトに矢印が追加されます。
リンクで選択したオブジェクトに矢印が追加されます。

それが画像の縮小、拡大に関わらず表示されるのが面白い点です。
それが画像の縮小、拡大に関わらず表示されるのが面白い点です。

jQuery.iviewerでは予め指定したオブジェクトに対して拡大、縮小の相対位置をきちんと記憶しているということです。そしてJavaScriptのアクションなどによって矢印を立てられるようになっています。表示だけでなくそういった点も面白いソフトウェアです。

jQuery.iviewerはjQuery/JavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。

jquery.iviewer test

jquery.iviewer test

can3p/iviewer

 

MOONGIFTの関連記事

  • DevRel
  • Com2