Colorboxカスタマイズ2題

画像等をポップアップ表示する際に、jQueryのプラグインのColorboxを使う機会がよくあると思います。
このColorboxについて、以下の2箇所をカスタマイズしてみました。

  • ポップアップを閉じる際のフェードアウトの速さを変える
  • 「Next」「Prev」等のメッセージの日本語化

1.ポップアップを閉じる際のフェードアウトの速さを変える

ポップアップを開く際のエフェクトにかける時間は、設定(speed)で変えられるようになっています。
ところが、ポップアップを閉じる際のエフェクトにかける時間は、コードに直接書かれていて、設定で変えることができないようになっていました。

そこで、コードを修正して、ポップアップを閉じる際にも、speedの値を使うようにしました。
jquery.colorbox.jsの977行目付近を以下のように書き換えます。

書き換え前

$overlay.fadeTo(200, 0);
			
$box.stop().fadeTo(300, 0, function () {

書き換え後

var speed = settings.speed;
$overlay.fadeTo(speed, 0);
		
$box.stop().fadeTo(speed, 0, function () {

2.メッセージの日本語化

現時点でColorboxをダウンロードし、Zipファイルを解凍すると、「i18n」フォルダの中に「jquery.colorbox-ja.js」というJavaScriptのファイルがあります。
以下のようにして、jquery.colorbox.jsを読み込んだ後に、jquery.colorbox-ja.jsを読み込むと、「next」「prev」等のメッセージが「次」「前」等の日本語に変わります。

<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript" src="i18n/jquery.colorbox-ja.js"></script>

ちなみに、この記事を書く前の時点では、Colorboxにはjquery.colorbox-ja.jsはありませんでした。
jquery.colorbox-ja.jsを作ってGithubでPull Requestを送ったところ、すぐにマージしてもらうことができました。