clicklog

最近、写真とかキャプチャとかが別タブに開くのが鬱陶しくなってきたので、ここを参考に Lightbox 系のスクリプトを眺めてたら、Highslide JSが、背景が暗くならない、シンプルそう、角丸がかわいい、だったので入れてみた。

[1] JavaScript を少し編集してアップロードする

--- highslide.js.old    2007-10-22 08:24:56.000000000 +0900
+++ highslide.js        2007-11-07 09:46:03.000000000 +0900
@@ -588,7 +588,7 @@
 };

 HsOutline.prototype.preloadGraphic = function () {
-       var src = hs.graphicsDir + "outlines/"+ this.outlineType +".png";
+       var src = hs.graphicsDir + this.outlineType +".png";

        var appendTo = hs.safari ? hs.container : null;
        this.graphic = hs.createElement('img', null, { position: 'absolute', left: '-9999px',

ディレクトリを掘るのが面倒だったので、引っ越しの時と同じ方法でファイルを全部(フラットに) /highslide にアップロードした。

[2]「デザイン」-「HTML」-「(使ってるHTMLテンプレート)」を編集

<script type="text/javascript" src="/highslide/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = '/highslide/';
    hs.outlineType = 'rounded-white';
</script>

を追加。(rounded-white を使う場合)

[3]「デザイン」-「デザイン一覧」-「(使ってるCSSテンプレート)」を編集
example-white-rounded-outline.html から必要な CSS をコピーする。 ただし、次の部分のみ変更しておく。

 .highslide {
-       cursor: url(highslide/graphics/zoomin.cur), pointer;
+       cursor: url(/highslide/zoomin.cur), pointer;
 }

[4] 画像の A タグを変更する
「target="_blank"」を「class="highslide"」へ変更。