画像の拡大表示JavaScriptであるThickBox 3.1を当ブログに設置しました。
参照
設置方法
ファイルのダウンロード
ThickBox 3.1から下記ファイルをダウンロード
- thickbox.js(お好みでthickbox-compressd.jsをダウンロード・リネーム)
- thickbox.css
- loadingAnimation.gif
- jquery.js(jquery-latest.jsをリネーム.お好みでjquery-latest.pack.jsをダウンロード・リネーム)
ディレクトリ構成を決定
Movable Type備忘録のbizbell氏に習い、下図の構成に決定。
thickbox.jsの編集
ディレクトリ構成を元に、[tb_pathToImage]のパス指定を編集(絶対参照で指定してしまいました)。
ファイルのアップロード
ディレクトリ構成に従い、4ファイルをアップロード
テンプレートの編集
Movable Typeの管理画面より[ヘッダー・テンプレート]のhtml要素内に下記項目を追加して保存。
<link rel="stylesheet" href="<$MTBlogURL$>js/jquery/plugins/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/plugins/thickbox.js">
投稿記事での使い方
画像が1ファイルの場合
<a href="filePath/fileName.png" class="thickbox" title="sample01"><img src="filePath/thumbnailfileName.png" alt="" /></a>
class属性の指定で、thickboxが機能します。title属性の値が画像のキャプションになります。
画像が複数ファイルの場合
<a href="filePath/fileName.png" rel="sample" class="thickbox" title="sample01"><img src="filePath/thumbnailFileName.png" alt="" /></a>
class属性の指定に加え、rel属性を追加します。同じrel属性が指定されているa要素は同じグループ扱いになります。
サンプル
コメントする