拙著「WordPress Web開発逆引きレシピ」が発売されました。
WordPressの様々なカスタマイズについて、逆引きの形式で取り上げています。
PHP 7.0での動作確認も行っています。
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を送ったところ、すぐにマージしてもらうことができました。