昨日の「slided.js」 設置説明 javascript」に続いて、今日も画像装飾系スクリプトの「loupe.js」をご紹介。
どのようなものかと言うと、何と(ノ゜⊿゜)ノびっくり!! 画像を虫眼鏡で拡大？しているかのような効果を与えるスクリプトです ・・・実際には２種類の画像を用意して、<img>タグの画像をスタイル指定の「z-index」（表示の優先順位を指定できる）で「-1」を指定して後面にし、前面に小さい方の画像を背景画像として表示させているようです。 ・・・とっても面白いので是非試してみてください。 (⌒^⌒)ｂ うん ・・・詳しくはサンプルを見てね～ （＾∀＾）
・・・ついに、このコピペの手抜き記事シリーズも今日を持って最後になります。（笑） あしたは何書こうかなぁ～・・・
設定方法
こちらからダウンロード解凍後にできた「loupe」フォルダを、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/loupe/ に置いたものとして説明します。）
次に「JavaScript」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript">
var loupePath="http://example.com/wp-content/js/loupe/";
</script> // ここに 「 loupe.png 」 のフォルダアドレス
<script type="text/javascript" src="http://example.com/wp-content/js/loupe/loupe.js"></script> // ここに 「 loupe.js 」 のファイルアドレス
<!--[if gte IE 6]>
<script type="text/javascript">
var loupePath = "http://example.com/wp-content/js/loupe/vml/";
</script>
<script src="http://example.com/wp-content/js/loupe/vml/loupe.js" type="text/javascript"></script>
<![endif]-->
黄文字の部分にファイルの設置場所（アドレス）を指定var loupePath="http://example.com/wp-content/js/loupe/";
</script> // ここに 「 loupe.png 」 のフォルダアドレス
<script type="text/javascript" src="http://example.com/wp-content/js/loupe/loupe.js"></script> // ここに 「 loupe.js 」 のファイルアドレス
<!--[if gte IE 6]>
<script type="text/javascript">
var loupePath = "http://example.com/wp-content/js/loupe/vml/";
</script>
<script src="http://example.com/wp-content/js/loupe/vml/loupe.js" type="text/javascript"></script>
<![endif]-->
下部分は「IE6」以降専用の指定です。 ・・・上記の説明と同じように「IE6」以降専用の（vmlフォルダにある）「loupe.png」のフォルダと「loupe.js」のファイルアドレスを指定します。
使用方法
記述方法は・・・<div>
<img id="id名" onLoad="initLoupe(this.id,true);" src="画像アドレス" width="サイズを指定" height="サイズを指定" alt="" />
</div>
上記のように<div>タグで囲って、<img>タグで記述し、ポイントとなる「onLoad="initLoupe(this.id,true);"」を付け、忘れずに「id名」も付けてください、名称は何でも構いません。<img id="id名" onLoad="initLoupe(this.id,true);" src="画像アドレス" width="サイズを指定" height="サイズを指定" alt="" />
</div>
画像のサイズ指定は最初に表示されるサイズを指定します・・・あまり小さすぎるとダメみたいです・・・もちろん、実際のサイズを指定すると・・・拡大されません (＞▽＜;; アセアセ
ちなみに (this.id,true) を (this.id,false) にすると虫眼鏡は最初は表示されず画像の右下の虫眼鏡マークをクリックすることにより表示されるようになるます。
・・・と、まぁ～基本的な画像を拡大させる記述方法は上記の様な感じですが・・・同じサイズの画像を入れ替える？場合は記述方法が違います・・・σ(^◇^;)ヒヤアセ
詳しくはサンプルページにサンプル画像と一緒に記述内容を書いておきましたので参考にしてください・・・付いていた、サンプルと同じですが・・・・(＞▽＜;; アセアセ
サンプル
残念なことに自分の環境ではこのページ上でお見せできないのでこちらになります。以上、終了です。
人気度 : 23 %
（ 参考になったら、評価してねぇ～ (o*。_。)oペコッ
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)