先日、このブログに実装したズームスクリプトであるFancyZoom。
使い方としては、以下の様に小さい画像をクリックで大きく見せる他に…、
用法1 単純ズーム
以下の様に局部を拡大させると言う新技を発明したNaoten。
用法2 照準ズーム。
しかしあれこれいじってたら、
「他のスクリプト等があると動作しない事がある」
と言う事に気づきました。
参ったねコレ。
例えば以下の様にAMAZONの商品リンクを貼ると、
この商品リンクと同時に表示されているズームは機能しなくなってしまうのです。
（と言いつつも現在、このページでズームが機能しているのは
以降で説明する対策を導入している為です。）
FancyZoomではbodyタグのonLoadイベントで、
スクリプトを初期化するsetupZoomメソッドを呼ぶ事になっているのだけれど、
AMAZONの商品リンクやブログヴィジット等の外部スクリプトがあると
どうやらこのonLoadイベントが呼ばれない事が有るらしい。
これに対して他サイトさんでは
JavaScriptのwindow.onLoadに追記する形で
この問題を回避しようとしている。
一応、これにより回避できる問題もあるみたいなのだけれど、
それでもAMAZONの商品リンクがあるとダメみたい。
つぇえなAMAZON商品リンク…。
そこで、問題を打開する為にsetupZoomメソッドでは何やってんのか見てみると、
<A>タグのonClickイベントにズーム機能を呼び出すメソッドを仕込んでいるだけみたい。
画像のロードが終わってなきゃダメとかって訳じゃ無い。
と言う事は<A>タグが全部読み終わっているのであれば良い訳で、
onLoadでの設定を取りやめて、
<body>タグの終わる直前に、
以下のコードを設定すれば良いんじゃないの？って思った。
つまりこんな感じ。
FC2の場合は環境設定→テンプレートの設定からHTML編集で
上記を設定してみるといいかも。
（注意：もちろん、FancyZoomの基本的な設定は終わっている事。
上記はあくまでonLoad処理でのsetupZoom呼び出しの代換方法です。）
これで問題は解決。お疲れ様でした。
ブラウザがIEの場合、ズームが果てしなく重いのは変わらないので、
そこはどうするかなーって感じですが、
とりあえずAMAZONや他の外部ソースと、
FancyZoomを混在できずに困っている方は試してみて下さいませ！
使い方としては、以下の様に小さい画像をクリックで大きく見せる他に…、
用法1 単純ズーム
以下の様に局部を拡大させると言う新技を発明したNaoten。
用法2 照準ズーム。
しかしあれこれいじってたら、
「他のスクリプト等があると動作しない事がある」
と言う事に気づきました。
参ったねコレ。
例えば以下の様にAMAZONの商品リンクを貼ると、
この商品リンクと同時に表示されているズームは機能しなくなってしまうのです。
（と言いつつも現在、このページでズームが機能しているのは
以降で説明する対策を導入している為です。）
FancyZoomではbodyタグのonLoadイベントで、
スクリプトを初期化するsetupZoomメソッドを呼ぶ事になっているのだけれど、
AMAZONの商品リンクやブログヴィジット等の外部スクリプトがあると
どうやらこのonLoadイベントが呼ばれない事が有るらしい。
これに対して他サイトさんでは
JavaScriptのwindow.onLoadに追記する形で
この問題を回避しようとしている。
一応、これにより回避できる問題もあるみたいなのだけれど、
それでもAMAZONの商品リンクがあるとダメみたい。
つぇえなAMAZON商品リンク…。
そこで、問題を打開する為にsetupZoomメソッドでは何やってんのか見てみると、
<A>タグのonClickイベントにズーム機能を呼び出すメソッドを仕込んでいるだけみたい。
画像のロードが終わってなきゃダメとかって訳じゃ無い。
と言う事は<A>タグが全部読み終わっているのであれば良い訳で、
onLoadでの設定を取りやめて、
<body>タグの終わる直前に、
以下のコードを設定すれば良いんじゃないの？って思った。
つまりこんな感じ。
<body>
～略～
<script type="text/javascript" charset="utf-8">
setupZoom();
</script>
</body>
FC2の場合は環境設定→テンプレートの設定からHTML編集で
上記を設定してみるといいかも。
（注意：もちろん、FancyZoomの基本的な設定は終わっている事。
上記はあくまでonLoad処理でのsetupZoom呼び出しの代換方法です。）
これで問題は解決。お疲れ様でした。
ブラウザがIEの場合、ズームが果てしなく重いのは変わらないので、
そこはどうするかなーって感じですが、
とりあえずAMAZONや他の外部ソースと、
FancyZoomを混在できずに困っている方は試してみて下さいませ！
