Loupe.js: 画像の拡大をしてくれるスクリプト

via
あらゆるページに拡大鏡を追加できる『Loupe.js』 | S i M P L E * S i M P L E

こういうツールが Javascript で提供されるとは素晴らしいです。さて早速動作検証をしました。配布元からの情報も含めて次のような感じです。

  • IEには対応していない Until now it’s not possible to get loupe.js work with IE.
  • application/xhtml+xml では動作しない

Document type の違いによる動作の可否については未だ詳細調べていませんが、動作確認してみたところ間違いなさそうです。一般的なサイトであれば問題なく動作するでしょうが、当サイトでは無理でした。残念。

以降、参考までに text/html で動作させた時のセッティングについて。

先ずはダウンロードしたアーカイブファイルを展開して loupe フォルダごと任意のフォルダにアップロードします。今回の場合はブログのカレントディレクトリ直下に hoge というディレクトリがあるものとして説明していきます。

基本的には Setting Up に記載されている通りなんですが、MTに埋め込むように書いてみました。エントリ毎にURLを持つようなサイトの場合 loupePath を必ず記載する必要があります。

<!-- ++ Loupe -->
<script type="text/javascript">var loupePath="<$MTBlogURL$>hoge/loupe/";</script>
<script type="text/javascript" src="<$MTBlogURL$>hoge/loupe/loupe.js"></script>
<!-- Loupe ++ -->

ここさえクリアしてしまえばエントリ中の img タグに id と onload=”initLoupe(this.id);” を記載する事で動きそうです。ああ、あと注意すべくは次の部分。

It’s not advisable to use the script multiple times on the same page.

未だ実用には耐えないのかもしれない。

参考
Loupe.js