TopJavaScript > 2007年5月
2007年5月24日

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

May 24,2007 1:50 AM
Tag:[, ]
Permalink

サムネイル画像を拡大させる 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)。
またこの対処はサンプルを作って実験したものですので、動作しない場合があるかもしれません。適正な対処方法がありましたらご教示ください。

Comments [2] | Trackbacks [2]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3