Slimbox 2をBloggerに導入する

Slimboxは、Webサイトの画像をページの遷移なしにカッコよく表示してくれるライブラリ Lightboxの派生系。見た目はほとんど変わらないが、本家のLightboxよりも動作が軽いのが特徴だ。今回はBloggerにSlimbox 2を実装する手順を紹介する。

まず、Slimbox 2, the ultimate lightweight Lightbox clone for jQuery · digitalia.beからSlimboxを入手する。

次に、ファイルを解凍しjsフォルダ・cssフォルダ内の以下のファイルを取り出す。

• slimbox2.js
• slimbox2.css
• closelabel.gif
• loading.gif
• nextlabel.gif
• prevlabel.gif

ここで、Bloggerにはこういった外部ファイルをアップロード出来る場所が無いので、代わりにGoogle サイトを利用する。Google サイトで新しいサイトを作成し、上記のファイル(slimbox2.cssを除く)をアップロードする。
slimbox2.cssは、以下の項目の画像ファイルのパスをアップロードした画像ファイルのURLに修正してからアップロードする。(ファイルのURLは最後に付く ?attredirects=0 の部分を除いたもの)

• .lbLoading
• #lbPrevLink:hover
• #lbNextLink:hover
• #lbCloseLink

そして、Bloggerのテンプレートのheadタグ内にアップロードしたファイルを外部から呼び出す記述を挿入する。(jQueryはGoogle AJAX APIを利用している。)

<link href='http://sites.google.com/site/ユーザー名/Home/slimbox2.css' rel='stylesheet' type='text/css'/>
<script>google.load('jquery', '1');</script>
<script src='http://sites.google.com/site/ユーザー名/Home/slimbox2.js' type='text/javascript'/>

最後に、記事の中のリンク先画像パス内の s1600-h の部分を削除し、rel=”lightbox”を追加する。

例：<a href="http://lh3.ggpht.com/~/s1600-h/xxxx.jpg">
  →<a href="http://lh3.ggpht.com/~/xxxx.jpg" rel="lightbox">

※ Windows Live WriterならばBloggerにも対応しており、自動でrel="lightbox"を挿入してくれる機能がある。