前回の記事「Shadowbox.jsのキャプション位置を画像の下に変えてみる」の追記です。あの作例では、ソースの skin.js にてキャプション位置を入れ替え、可読性のよろしくない shadowbox.js を開いてズボ替えする方法を採りました。
これでも結果オーライだからまあいいのですけれど、別解として skin.js を修正した後、自分でカスタム shadowbox.js を作る方法も紹介します。
なお、カスタム shadowbox.js を作るには
- Ruby
- Rake（Rubyによるビルドツール）
が必要なのでご了承のほど。ここでは、Ubuntuを使ってのビルド（作成）方法について紹介していきます。
まずは ruby と rake を apt か aptitude でインストール。
sudo apt-get install ruby rake |
GitHubからダウンロードした Shadowbox.js のソースディレクトリに移動し設定ファイル build.yml を開きます。
--- # May be the name of any adapter in source/adapters adapter: base # May be any language code in source/languages language: en # An array of names of players found in source/players players: [flv, html, iframe, img, qt, swf, wmp] # YES to include support for CSS selectors, NO to decline css_support: YES # YES to compress the code, NO to use the source code compress: NO # The directory to output the build to target: build |
日本語環境で使うなら
-language: en +language: ja |
あとはお好みで、ライブラリとしてjQueryを使いたいなら
-adapter: base +adapter: jquery |
可読性よりもファイルサイズ・実行速度重視なら
-compress: NO +compress: YES |
と変更すればよいでしょう。
それではおもむろに Rake でビルド。build.yml のあるディレクトリでコマンドを実行します。同じディレクトリにある Rakefile が自動的に build.yml の設定内容を読みにいってくれるので、rakeコマンドは引数なしでオッケイです。
rake |
すると、同じ階層に build というディレクトリが新たにできます。build ディレクトリの中身は例えばこんな感じですね。
LICENSE README close.png expressInstall.swf loading.gif next.png pause.png play.png player.swf previous.png shadowbox.css shadowbox.js |
これでビルドは完了。ディレクトリ名を Shadowbox などに適宜変えて、いつもどおりウェブサーバ上にディレクトリごとアップロードしてください。
![[Google Calendar Events] イベントの内容に応じて数字の色を変えてみた](https://www.tecking.org/wordpress/wp-content/uploads/2012/04/calendar-150x150.png)