「WordPressで学ぶPHP(4)通信編」を発売しました。
本書は、「WordPressで学ぶPHP(1)変数・制御構造編」「WordPressで学ぶPHP(2)データ構造編」「WordPressで学ぶPHP(3)関数編」の続編にあたり、Webブラウザとサーバー(PHP)との通信と、PHPから他のサーバーに通信することについて解説します。
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を送ったところ、すぐにマージしてもらうことができました。
