前回の記事「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 などに適宜変えて、いつもどおりウェブサーバ上にディレクトリごとアップロードしてください。