Loupeを使う

ここで説明するサンプルは以下のファイル/フォルダ構成になっています。サンプルのようにloupe.png画像ファイルがHTMLファイルと異なる階層にある場合には最初に以下のように画像のパスを設定する必要があります。

<script type="text/javascript">
    var loupePath = "js/";
</script>

本稿の構成図

同じ階層にある場合には、このような指定をする必要はありません。Loupeを使うには以下のように<script>タグを指定します。

<script type="text/javascript" src="js/loupe.js"></script>
<script src="loupe.js" type="text/javascript"></script>
<!--[if gte IE 6]> 
<script type="text/javascript">
    var loupePath = "vml/";
</script>
<script src="vml/loupe.js" type="text/javascript"></script>
<![endif]-->

Internet ExplorerではVML、Firefox/Safariなど他のブラウザでは<canvas>を使って処理を行っています。このため、コメント分岐を使ってInternet Explorer専用にスクリプトファイルを読み込ませます。

<script type="text/javascript" src="js/corner.js"></script>

Loupeでは<img>タグにIDとonLoadイベントを指定することでルーペ処理が割り当てられるようになっています。ルーペ処理で拡大される画像は、大きめのものを用意しておく必要があります。表示されるサイズは<img>タグのwidth、heightで指定します。サンプル01では拡大対象になる画像は1920×1080サイズで、画面に表示されるサイズは384×216としています。なお、<img>タグは<div>タグで囲んでおく必要があります。

<img id="MtFuji" onLoad="initLoupe(this.id, true);" src="images/large.jpg" width="384" height="216">

サンプル01の実行結果

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Loupeサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript">
            var loupePath = "js/";
        </script>
        <script type="text/javascript" src="js/loupe.js"></script>
        <script src="loupe.js" type="text/javascript"></script>
        <!--[if gte IE 6]> 
        <script type="text/javascript">
            var loupePath = "vml/";
        </script>
        <script src="vml/loupe.js" type="text/javascript"></script>
        <![endif]-->
    </head>
    <body>
    <h1>Loupeサンプル</h1>
    <div>
        <img id="MtFuji" onLoad="initLoupe(this.id, true);" src="images/large.jpg" width="384" height="216">
    </div>
    </body>
</html>

タグのinitLoupe(this.id, true)は最初のパラメータがルーペ処理の対象画像のID名、2番目のパラメータは最初からルーペを表示するかどうかのフラグです。画像が読み込まれた後、trueを指定するとルーペが表示され、falseでは表示されません(サンプル02)。2番目のパラメータは省略可能で、省略した場合はfalseとなり最初の時点ではルーペは表示されなくなります。

サンプル02の実行結果

画像が読み込まれたあとルーペが表示

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Loupeサンプル</title>
        <style type="text/css"><!--
        h1 { color:#33f; }
        body { background-color:white; }
        --></style>
        <script type="text/javascript">
            var loupePath = "js/";
        </script>
        <script type="text/javascript" src="js/loupe.js"></script>
        <script src="loupe.js" type="text/javascript"></script>
        <!--[if gte IE 6]> 
        <script type="text/javascript">
            var loupePath = "vml/";
        </script>
        <script src="vml/loupe.js" type="text/javascript"></script>
        <![endif]-->
    </head>
    <body>
    <h1>Loupeサンプル</h1>
    <div>
        <img id="MtFuji" onLoad="initLoupe(this.id, false);" src="images/large.jpg" width="384" height="216">
    </div>
    </body>
</html>