WebScrap

August 7, 2009

Slimbox 2をBloggerに導入する

Slimbox 2のデモ

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"を挿入してくれる機能がある。

1 Coment:

Choco said...

自分のブログからコメント経由で来ました。
ためになるエントリーありがとうございます!これイイ♪って思ったので早速、実装させていただきました。

Post a Comment