Page up▲

AMAZONリンクや他スクリプトがあるとFancyZoomが動かない問題

先日、このブログに実装したズームスクリプトであるFancyZoom。

使い方としては、以下の様に小さい画像をクリックで大きく見せる他に…、

リオ1
用法1 単純ズーム


以下の様に局部を拡大させると言う新技を発明したNaoten。

リオ1
用法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を混在できずに困っている方は試してみて下さいませ!

 

Designed by mi104c.
Copyright © 2012 直天堂のカステラ, all rights reserved.
12 | 2012/01 | 02

sun

mon

tue

wed

thu

fri

sat

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

Page up▲

  • 最新記事のRSS
  • 最新コメントのRSS
  • 最新トラックバックのRSS