Thickboxを導入

画像のサムネイルをクリックすると画面がグレーアウトして、拡大画像が中央に表示されるスタイル。巷ではこれを(最初に実現したスクリプトの名前をとって)Lightbox風と呼んでいるようですが。今回それ系のひとつであるThickboxをSKAに仕込んでみた。なお、以下の説明にはエントリ記述時の最新版であるThickbox 3.1を使用している。

導入方法

設置は非常に簡単。まず公式サイトからthickbox.js, jquery.js, thickbox.css, loadingAnimation.gifの4ファイルをダウンロードする。

次に、thickbox.jsの8行目を、導入環境に応じて書き換える。loadingAnimation.gif(拡大画像のローディング中に表示されるアニメーションGIF)のある場所を指定する部分。

var tb_pathToImage = "thickbox/loadingAnimation.gif";

呼び出し元となるHTMLファイルから見た相対パスで指定する。SKAではHTMLがドキュメントルート直下にあり、loadingAnimation.gifを含むthickboxの構成ファイルはすべてルート直下のthickboxディレクトリに置くことにしたので、上記のような指定となる。

修正がすんだら、先述の4ファイルをサーバにアップロードする。

なおパスを正しく指定したにもかかわらず上記のアニメーションGIFが表示されない(IEなら、×印になる)ときは、アップロードしたファイル名の小文字・大文字を確認してみること。デフォルトではloadingAnimationのAだけが大文字になっているが、たとえばNextFTPを使用していて「すべてのファイル名を小文字に変換してアップロードする」のオプションが有効になっているとこれが小文字になってしまっていて、ハマる。

そして、呼び出し元のHTMLからこれらの構成ファイルを参照するため、HTMLのhead要素内に以下のタグを記述する。

<link rel="stylesheet" type="text/css" href="thickbox/thickbox.css" />
<script type="text/javascript" src="thickbox/jquery.js"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>

link要素のhref属性とscript要素のsrc属性に記述するパスは、導入する環境に応じて変わることに注意。SKAでは先述したように、構成ファイルはいずれもルート直下のthickboxディレクトリにあるため、上記のような指定となる。

最後に、Lightbox効果を適用したいimg要素(サムネイル画像)を囲むa要素(リンク)に、「class="thickbox"」を追加する。以下は一例。

<a href="sample1.jpg" class="thickbox"><img src="thumb/sample1.jpg" /></a>

複数の画像をアルバム表示したい場合は、class指定に加えてrel属性で任意の文字列を指定する。同一の文字列を指定した画像が同一グループとして扱われ、順番にアルバム表示することができる。以下は一例。

<a href="sample1.jpg" class="thickbox" rel="album"><img src="thumb/sample1.jpg" /></a>
<a href="sample2.jpg" class="thickbox" rel="album"><img src="thumb/sample2.jpg" /></a>
<a href="sample3.jpg" class="thickbox" rel="album"><img src="thumb/sample3.jpg" /></a>

注意点

  • 動作にJavascriptを利用している。Javascriptを利用するギミックの常として、Javascriptが有効でない環境ではLightbox効果を実現できない。しかしHTML上の記述は単なる画像への(class指定された)リンクなので、リンクをたどれば(サムネイルをクリックすれば)リンク先の画像を表示することができる。
  • 機能の実装のためにthickboxというクラス名を使用するため、導入する環境に同名のクラスがある場合は、誤動作を防ぐために重複しない名前に変更したほうがいいかもしれない。
  • 拡大画像を表示する際のデザインとして独自のCSSを使用しているが、Javascriptが有効でユーザースタイルシートを適用している環境では表示が崩れるかもしれない。

Lightbox.jsとの違い

  • 元祖Lightboxでは拡大画像がブラウザの表示領域より大きい場合ははみ出してしまい、スクロールしないと見られないが、Thickboxでは表示領域内に収まるように適当に縮小して表示される。
  • 拡大画像を表示したままスクロール操作をすると、画像は動かずに、グレーアウトしたリンク元のHTML文書だけがスクロールする。
  • アルバム表示した際に表示される拡大画像下の進む・戻るリンクのパスは、おそらく相対パス。Lightboxのそれはたぶん絶対パス。SKAには絶対パス表記のリンク先を別ウインドウで表示するJavascriptを適用しているので、Lightboxだとクリックするたびにウインドウが開いて閉口した。これがLightboxでなくてThickboxを選んだ理由なのですが……。

関連(してるかもしれない)記事たち

写真1
ThickboxとIE8のバグ
バグ報告を受けました。WinXP+IE8で画像の詳細表示をすると、拡大画像が半分くらい下にずれてこんな感じになるとのこと...
wptouch-mobile
アップデートに負けないWPtouchカスタマイズ
カスタマイズした内容がアップデート適用で消える WPtouch Moblie Plugin(以下WPtouch) は自分...
WordPressへCSV形式で記事を移行
4年ぶり?にサイトリニューアルしました。PHPによる独自システムからWordPressベースに変更。デザインそのものはほ...

コメントを残す

メールアドレスが公開されることはありません。