HighSlide JS と prototype.js の競合を解消する

HighSlide JS と prototype.js の競合を解消する

Posted at May 24,2007 1:50 AM
Tag:[HighSlide, JavaScript]

サムネイル画像を拡大させる HighSlide JS(関連記事「Highslide JS でサムネイル画像を拡大表示する」)には、

  • ブラウザのウィンドウサイズに収まるように拡大(右下のアイコンをクリックすると 100% 表示)

という機能があり、この場合、拡大した画像の右下に最大化するアイコンが表示されます。

拡大した画像

このアイコンをクリックすると、ブラウザのウィンドウサイズに関わらず画像が最大化されます。最大化された画像は最大化前と同じようにドラッグや縮小することができます。

1.問題点

この最大化をすると別のページにジャンプをして元画像が表示されてしまうケースがあります。

2.原因

Highslide JS と prototype.js を同時に利用している場合、prototype.js が Array に対して拡張を行っているため、Highslide JS で使用している配列が汚染され、

for (var i in array) {
    :
}

の処理で余計なものが含まれてしまうようです。
これが原因で最大化処理に不具合が発生します。

具体的には、highslide.js の下記の部分が汚染されている模様です。

// reposition overlays
for (x in this.overlays) {
        hs.purge(this.overlays[x]);
        this.overlays[x].parentNode.removeChild(this.overlays[x]);
}

3.対処方法

for 文を

for (var i = 0; i  < array.length; i++) {
    :
}

に変更すると解消するらしいので、問題となる処理が含まれる関数のみをオーバーライドしてみました。

まず、下記の内容を丸コピーし、highslide-custom.js という名称で highslide.js と同じディレクトリに保存してください。

HsExpander.prototype.doFullExpand = function () {
    try {
        hs.purge(this.fullExpandIcon);
        this.fullExpandIcon.parentNode.removeChild(this.fullExpandIcon);
        this.focus();
        this.x.min = parseInt(this.wrapper.style.left) - (this.fullExpandWidth - this.content.width) / 2;
        if (this.x.min < hs.marginLeft) this.x.min = hs.marginLeft;        
        this.wrapper.style.left = this.x.min +'px';
        var borderOffset = this.wrapper.offsetWidth - this.content.width;        
        this.content.width = this.fullExpandWidth;
        this.content.height = this.fullExpandHeight;
        this.x.span = this.content.width;
        this.wrapper.style.width = (this.x.span + borderOffset) +'px';
        this.y.span = this.wrapper.offsetHeight - 2 * this.offsetBorderH;
        this.positionOutline(this.x.min, this.y.min, this.x.span, this.y.span);
        // reposition overlays
        for (x = 0; x < this.overlays.length; x++) {
            hs.purge(this.overlays[x]);
            this.overlays[x].parentNode.removeChild(this.overlays[x]);
        }        
        if (hs.showCredits) this.writeCredits();
        this.createCustomOverlays();
        this.redoShowHide();
    } catch (e) {
        window.location.href = hs.expanders[this.key].content.src;
    }
};

そして、ご利用のサーバにアップロードして、テンプレートに下記の青色の行を追加してください。

           :
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript" src="highslide/highslide-custom.js"></script>
           :

この1行は、元の highslide.js を読み込む script 要素の後に記述してください。
また、src 属性部分の記述は例ですので、ご利用になっている highslide を読み込んでいる script 要素の src 属性に合わせてしてください。
例は highslide というディレクトリ配下にある場合を想定しています。

4.注意事項

IE6/iE7 では2回目以降の拡大処理がスムーズに動作しない事象が確認されています(Firefox / Opera は OK)。
またこの対処はサンプルを作って実験したものですので、動作しない場合があるかもしれません。適正な対処方法がありましたらご教示ください。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Highslide JS利用時の汚染解消 from Az ::clivia::
これまで HighSlide JS を利用してサムネイル画像を拡大表示させていたのですが、縦横の大きさによっては拡大した時に下の画像ように、右下へブラウザ... [続きを読む]

Tracked on April 6, 2008 4:14 AM

拡大成功 from 瑞了奇譚
かくだいせいこう [続きを読む]

Tracked on June 10, 2008 5:39 PM
コメント

この記事の通りに設定しましたら、無事に希望通りの動作になりました。
自分はソースとにらめっこするくらいしかできませんでしたが、流石としか云い様がないです!
まだまだローカル環境で試している段階ですが、他のWordPressの記事も大変参考にさせていただいております。
この度はありがとうございました。

[1] Posted by jaco : May 24, 2007 10:28 PM

>jacoさん
こんばんは。
ご連絡ありがとうございました。
うまく動いたようでよかったです。
ではでは!

[2] Posted by yujiro : May 26, 2007 1:17 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)