印刷用表示へ切り替え 通常表示へ切り替え 更新履歴を表示 更新履歴を隠す
Thu February 28, 2008
Linux Highslide JS の表示を Lightbox JS 風にカスタマイズ

Highslide JS をカスタマイズし，拡大画像はブラウザの中央に表示し，背景は半透明の灰色になるようにする。

■ ■ ■

はじめに

Highslide JS のデフォルトでは，サムネイルをクリックして拡大表示させたとき，画像はサムネイルの上の位置に，背景色 (画像の周りの色) は透明のままである。この記事では，カスタマイズを行い，Lightbox JS 風の表示にする方法を紹介する。「Lightbox JS 風」とは次のものであるとする。

  • 拡大画像をブラウザの中央に表示
  • 背景を半透明グレーに着色
  • その他
    • Highslide JS へのリンクを画像の外の余白に表示
    • キャプションを中央揃えに

作業の流れは別記事の通り (nlog(n): Highslide JS をカスタマイズして使う)。設定だけを行いたい場合は，一番下の「まとめ」だけを読めばよい。

機能の追加

拡大画像をブラウザの中央に表示

拡大画像をブラウザの中央に表示するには，hs.align を使う (Highslide JS API Reference : hs.align)。設定の場所は，ヘッダでも個々の画像でもよい。ここでは，ヘッダに設定することでページ内のすべての画像に対して中央に表示させるようにする。ヘッダには次を書く。

<script type="text/javascript">
   hs.align = 'center';
</script>

中央表示に必要なスクリプトは「Advanced positioning」である。デフォルトの highslide.js には含まれていない。

背景を半透明グレーに着色

背景を半透明にするには hs.dimmingOpacity を使う (Highslide JS API Reference : hs.dimmingOpacity)。無色からグレーにする時間間隔は hs.dimmingDuration で指定する (Highslide JS API Reference : hs.dimmingDuration)。瞬間的に色づけをするには 0 を指定するのだが，バグがあるのでお勧めできない。最短の 25 (単位は ms) を設定することで凌ぐことにする。このバグについては後述する。

<script type="text/javascript">
  hs.dimmingOpacity = 0.15;
  hs.dimmingDuration = 25;
</script>

背景の灰色をどれくらい濃くするかは，hs.dimmingOpacity を0〜1の範囲で指定する。1だと真っ黒になる。Highslide JS は，拡大画像をマウスで移動して，画像に隠れた文字を読めるのが利点であるから，真っ黒にするのは好ましくない。そこで，薄い灰色にすることにした (hs.dimmingOpacity = 0.15)。

スタイルシートには次の記述を追加する。

.highslide-dimming {
        position: absolute;
        background: black;
}

hs.dimmingOpacity, hs.dimmingDuration に必要なスクリプトは「Transitions」である。「Transitions」はデフォルトの highslide.js に含まれていない。

highslide.js のダウンロード

Highslide configurator
Highslide configurator


コンフィギュレータのページを開き (Highslide JS - JavaScript thumbnail viewer)，次の手順で highslide.js をダウンロードする。

  1. 「Advanced positioning」と「Transitions」のチェックボックスにチェックを入れる
  2. 「Pack it!」にチェックを入れる
  3. 「Update」ボタンをクリックする
  4. 「Download current」ボタンをクリックし，「highslide.js」という名前で保存する

ダウンロードした highslide.js を，サーバ上の highslide.js に上書きする。「Pack it!」で圧縮すると，コードはもはや読めるような代物ではなくなるが，ここでは可読性は重要ではない。容量が 48 kB から 22 kB のように半分になるという利点の方が大きい。

CSS の設定

Highslide JS へのリンクを余白に表示

Highslide のクレジットに関しては，Highslide JS は Creative Commons by-nc 2.5 でライセンスされているので，表示が必要である (Highslide JS - JavaScript thumbnail viewer)。デフォルトでは，画像に重なって左上の位置に表示されるようになっている。しかし，Windows のダイアログ画像などではタイトルバーの文字と重なってしまい読みづらくなるという欠点がある。そこで，クレジット表示を少し上にずらし，余白に表示することにする。CSS としては次の部分である。

/* original */
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
        font-size: 10px;
}

これを次のように修正する。

/* modified */
a.highslide-credits {
    position: relative;
    top: -15px;
    padding: 2px;
    color: silver;
    text-decoration: none;
        font-size: 10px;
}
a.highslide-credits i {
}

キャプションの中央揃え

キャプションの中央に表示するには，highslide-caption 内に「text-align: center;」を追加する。

.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
    text-align: center;
}

ドロップシャドウしている場合

ドロップシャドウでサムネイルに影をつけている場合 (nlog(n): アップロードした画像に影をつけるには)，サムネイルのまわりの枠線は必要ないので，次の部分をコメントアウトする。

/*
.highslide img {
        border: 2px solid gray;
}
.highslide:hover img {
        border: 2px solid white;
}
*/

古いブラウザへの対応

背景を半透明グレーの設定にすると，古いブラウザ Netscape 7.1 では，背景が真っ黒になってしまう。Netscape 7.1 でもグレーに表示させるために，highslide-dimming 内に追加の記述を行う。恐らくは「-moz-opacity」の設定だけでよいのだろうが，他の古いブラウザにも対応させておく。数値は，前述の hs.dimmingOpacity で設定した値と同じものを指定する。

.highslide-dimming {
        background: black;
        position: absolute;
        filter: alpha(opacity=15); /* ie */
        -moz-opacity: 0.15; /* Mozilla */
        opacity: 0.15; /* w3c */
}

その他

文書全体のフォントサイズの指定は不要なので，コメントアウトする。

/*
* {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
*/

まとめ

設定のまとめ

まず，Highslide JS のパッケージをインストールし，もとの highslide.js を，コンフィギュレータで機能追加した highslide.js で上書きする。

上記の変更を行ったスタイルファイルを，例えば styles-highslide.css という名前で保存する (サンプル: styles-highslide.css)。

Highslide JS のスクリプトを「/js/highslide/」に保存し，スタイルファイルを /styles-highslide.css に保存したとすると，ヘッダには，次を追加ればよい。

<link rel="stylesheet" href="/styles-highslide.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/highslide/highslide.js"></script>
<script type="text/javascript">
    hs.align = 'center';
    hs.dimmingOpacity = 0.15;
    hs.dimmingDuration = 25;
    hs.graphicsDir = '/js/highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>

画像の周りには「角丸の白枠」をつけるようにしているので，「hs.outlineType = 'rounded-white';」を指定している。

拡大画像へのリンクには，「class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"」の属性を追加する。ユーザビリティを考慮して，onkeypress 属性も追加するのがよい (小粋空間: Highslide JS でサムネイル画像を拡大表示する)。

できないこと

ローディング中に画面をグレーにできれば，より Lightbox JS に近づく。これをやりたかったのだが，Highslide JS では拡大表示後にグレーにするので，そもそもの設計が違っている。これは残念だができなかった。

Highslide JS のバグ

現時点での最新版 3.3.11 とそれ以前のバージョンには dimmingDuration = 0 とすると，IE6 では1回目しか背景が変わらないというバグがある。値を 25 の倍数で設定すれば，2回目以降も変わるようになる。この問題については，つい最近フォーラムにあがったので，いずれ修正されると思われる (Highslide JS Forum :: View topic - IE6 + hs.dimmingDuration = 0 ?)。

Posted by n at 2008-02-28 21:57 | Edit | Comments (14) | Trackback(1)
Trackbacks

  • 「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
  • タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細は トラックバック送信時のエラー をご覧ください)
  • トラックバックする記事には，この記事へのリンクを含めてください(詳細は 迷惑トラックバック対策 をご覧ください)
Highslideと格闘中
今、この記事を使って、実装しようと奮闘しているトコ。 なので、記事を閲覧されている方、タイミングによっては嫌ぁなことになってるかも。 ごめんね。 とりあえず、このSeesaaブログ、ファイルをアップロードする時、 フォルダを入れ子にできない・・・し、ガサっとま... Trackbacked from: ILLdeMizM at January 05, 2009 23:32
Comments

拡大画像の左上にあるリンク記号を取り去るにはどのようにしたらよいのでしょうか？

Posted by: とど at March 02, 2008 20:47

とど さん
記事中にも書いたとおり，リンクを削除して使うのはライセンス違反です。ここでの回答はご勘弁を。使用料を払っているのであれば，リンク削除は問題ないはずです。

Posted by: n at March 02, 2008 21:58

Highslide JSをクリッカブルマップに指定する事は不可能なのでしょうか？試してみたところ、どうしても拡大画像がウィンドウの左上からすべて出てきてしまいます。お分かりになるようであれば教えていただければ幸いです。

Posted by: ひで at March 18, 2008 21:33

ひで さん
やったことがないのでよく分からないのですが，hs.Expander.prototype.onImageClick でマウスクリックイベントがとれるので，拡大画像をクリッカブルマップにできるかも知れません。

Posted by: n at March 20, 2008 22:58

こんばんは。
画像をHighslideで表示した時にキャプションや画像右下の拡大ボタンがフェードインして表示され、拡大ボタンはマウスアウトした際にフェードアウトされるのですが、これを瞬時に表示・非表示されるようにはできますか？

Posted by: tori at November 25, 2008 19:10

tori さん
調べてみましたが，簡単な指定方法はないようです。一番手軽なのはハックです。
createFullExpand の中の this.createOverlay 内で fade: 0 を指定してください。
参考: http://highslide.com/ref/hs.Expander.prototype.createOverlay
highslide-4.0.10 で動作確認しました。highslide-3.3.8 では動作しませんでした。
createFullExpand をオーバーライドするのが正しいのでしょうが，今回はこれでご勘弁を。

Posted by: n at November 26, 2008 22:02

調べて下さりありがとうございます。おかげで目的が達成できそうです。
ソースを見てる内に captionOverlay という部分を見つけ、ここに fade: 0 を指定したところキャプションのフェードインをオフに出来ました。
また、scriptタグ内で hs.captionOverlay.fade =0; を記述したところ同様の効果は得られましたが、仰るように拡大ボタンの方の簡単な指定方法はないみたいですね。

時に、コンフィギュレータのページの Unobtrusive とはどういうことなのかご存知でしょうか。
javascriptとHTMLを分けるというのがいまいち分からず…。
単に、HTML内に記述せずにjsファイルから読み込むようにするということなのでしょうか？

それにしても更新が早いですね。24日に 4.0.8 をダウンロードしたのですが、翌日見ると 4.0.9 になっており、nさんの書き込みによると26日には 4.0.10 になっていたようで。
…と思ったら更新履歴を見ると 4.0.8(10/30) 4.0.9(11/24) 4.0.10(11/25) でした。
ちなみにいつ頃からかは分かりませんが長いことHIghslide JSのサイトが落ちていたようで先ほど 4.0.10 になっていたことを確認しました。

Posted by: tori at November 27, 2008 21:18

tori さん
Unobtrusive が使われている例を見ると，
http://highslide.com/ref/hs.isUnobtrusiveAnchor
http://highslide.com/ref/hs.onSetClickEvent
どうやら，画像などの anchor や img タグに Highslide を使うことを明示的に書かずに，Highslide を動作させるもののようです。例の HTML には rel や onclick が書かれていません。
「明示しない」→「Unobtrusive (控え目)」ということではないでしょうか。

Posted by: n at November 28, 2008 05:35

Unobtrusive は写真や絵の展示ページに使えそうですね。
ありがとうございました。

Posted by: tori at November 28, 2008 21:47

とどさん、nさん
http://highslide.com/ref/hs.showCredits
に、"There are no license considerations in this; both commercial and non-commercial users can freely remove the credits label."と書かれていますから、「リンクを削除して使うのはライセンス違反」ではないようです。

Posted by: footbrain at December 04, 2008 18:31

footbrain さん
あ，本当だ。確かにそうなっていますね。そのページは見ていませんでした。情報ありがとうございました。
私がライセンスのことを気にしたのは，「Creative Commons Attribution-NonCommercial 2.5 License」となっているからなのです( http://highslide.com/#licence )。
CCライセンスは「再配布」のときに有効だということなのでしょうかね。だとすると，CCライセンスに続く注釈の「This means you need the author's permission to use Highslide JS on commercial websites.」で「商用サイトの『利用』においては」となっているのが謎です。つまり「利用」時にCCライセンスが有効となるように読めるのです。つまり，利用の際はどこかに帰属を明示しなければならないと思うのですが，どうでしょうか。

Posted by: n at December 04, 2008 22:07

http://highslide.com/download-confirm.php
の"Licenses"にすべて書かれていますね。
"Do you want to use Highslide for a personal website, a school site, your family's photo album or a non-profit organisation? Then you don't need the author's permission, just go on and use Highslide. "とあります。
"Do you accept the licence conditions above?"に"Yes"と答えてダウンロードされたはずです。（よね？）

Posted by: footbrain at December 05, 2008 10:50

footbrain さん
もちろんそれは承知しています。私の疑問は，ライセンスの記述とマニュアルの記述に矛盾があるように見えるということなのです。つまり，
・クリエイティブコモンズ「表示-非営利」ライセンス→原著作者のクレジットを表示せよ
・APIリファレンス→原著作者のクレジットを表示しないようにしてよい
が矛盾しているように見えるということです。商用の場合は，ライセンス料を支払うことにより，CCライセンスが外れるためクレジット表示の義務はなくなりますが，非商用の場合は外れません。
「非商用」で「拡大画像でライセンス表示をさせない」で，「CCライセンスに違反しないように」の3つの条件を全て満たすには，どうすればいいのでしょうか?
「拡大画像以外のところでクレジット表示」すればいいということでしょうかね。

Posted by: n at December 07, 2008 03:11

クリエイティブコモンズ

放棄 ― この作品について著作権者等の権利者から別途許可を得た場合は、上記の許諾条件は適用されません。

Waiver ― Any of the above conditions can be waived if you get permission from the copyright holder.

--------------------------

著作権消していいよのコメントが「別途許可を得た」になるのか、という事が論点ですね。

Posted by: s at April 24, 2011 14:03
Post a comment
  • 電子メールアドレスは必須ですが，表示されません (気になる場合は「メールアドレスのような」文字列でもOKです)
  • URL を入力した場合はリンクが張られます
  • コメント欄内ではタグは使えません
  • コメント欄内に URL を記入した場合は自動的にリンクに変換されます
  • コメント欄内の改行はそのまま改行となります
  • 「Confirmation Code」に表示されている数字を入力してください (迷惑コメント対策です)


(必須, 表示されます)


(必須, 表示されません)


(任意, リンクされます)


Confirmation Code (必須)


Remember info (R)?

‌