今回は自分のブログに lightbox 風な写真表示を TypePad に設置する方法をご紹介します。
前にご紹介しました「jQueryライブラリを使う」ウィジェットを導入しつつ、TypeList にスクリプトを追加することで、上級者テンプレートを使わずに lightbox 風な写真表示を実現します。
まずはこちらのページから jQuery ライブラリをウィジェットとしてブログに登録してください。
次に lightbox 風なプラグインを導入しましょう。
最初にこちらのページにアクセスして最新版をダウンロードしてください。（私は ０．５ でした）
ダウンロードしましたら解凍してください。
解凍しましたら js、css、gif などを TypePad にアップロードします。アップロードはコントロールパネルのファイルマネージャから行います。
私は『ホーム』ディレクトリの直下に js、images、css というディレクトリを準備し、そこへアップロードしました。以下に私がアップロードしたパスとファイルをご紹介します。
http://comewalk.typepad.jp/js/jquery.lightbox-0.5.js
http://comewalk.typepad.jp/css/jquery.lightbox-0.5.css
http://comewalk.typepad.jp/images/lightbox-ico-loading.gif
http://comewalk.typepad.jp/images/lightbox-btn-close.gif
http://comewalk.typepad.jp/images/lightbox-btn-prev.gif
http://comewalk.typepad.jp/images/lightbox-btn-next.gif
http://comewalk.typepad.jp/images/lightbox-blank.gif
さてあとは以下の javascript を TypeList に貼付けます。私のドメイン部分を太字にしておきましたが、ファイルのパスを含めて皆さんの環境に合うように適宜読み替えてください。
毎度のお願いですが、TypeList の「メモ」または「リンク」のメモ欄に貼付けます。（「リンク」の TypeList を使う場合はそのリストの設定ページで「メモをテキストとして表示」を選択しておいてください）
<script type="text/javascript" src="https://comewalk.typepad.jp/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="http://comewalk.typepad.jp/css/jquery.lightbox-0.5.css" media="screen">
<script type="text/javascript">
$(function() {
$('.entry-body a[href$=".jpg"] > img').filter(function() {
var href = $(this).parent().attr('href').replace('/.shared/image.html?', '');
$(this).parent().attr('onclick', '');
$(this).parent().attr('href', href);
return true;
}).parent().lightBox({
imageLoading: 'http://comewalk.typepad.jp/images/lightbox-ico-loading.gif',
imageBtnClose: 'http://comewalk.typepad.jp/images/lightbox-btn-close.gif',
imageBtnPrev: 'http://comewalk.typepad.jp/images/lightbox-btn-prev.gif',
imageBtnNext: 'http://comewalk.typepad.jp/images/lightbox-btn-next.gif',
imageBlank: 'http://comewalk.typepad.jp/images/lightbox-blank.gif'
});
});
</script>
これで完了です。ブログの写真をクリックすると lightbox 風に写真が表示されたと思います。
「写真をクリックしたけど表示されない」という方、もしかして、その写真はもともとクリックして画像を表示するタイプではなく、単に画像だけを表示していませんか？
HTML 構造の観点から具体的に言うと、<a><img /></a>という構造のときに lightbox 風な表示になります。<img />のみでは lightbox 風な表示にはなりません。クリックした先の画像ファイルを次のページに遷移しないで、その場で表示するのが lightbox 風な表示になります。その点にご注意ください。
TypePad では WYSIWYG エディタで「画像の挿入」を利用して、「カスタム設定」を開くと、「ポップアップウインドウ」というチェックボックスがありますので、そこにチェックを入れて、画像を記事に挿入したときが lightbox 風な表示をするためのポイントです。
TypePad では「ポップアップウインドウ」指定で画像を挿入すると、a タグの onclick を利用して新しいウインドウを開きます。これを無効かしないと、lightbox 風に表示しつつ、ウインドウも開いてしまうので、$(this).parent().attr('click', '') として onclick の処理を消しました。
また「ポップアップウインドウ」指定の場合、/.shared/images?画像のパス という形で a タグの href 属性を作ります。これだと jpg ではなく、html を表示してしまい、この jQuery lightBox plugin とは相性がよろしくありません。そこで、/.shared/image.html? を削除して、再度 href 属性を指定するために、$(this).parent().attr('href', href) ということをしています。
サンプルなどでは $('#gallery a').lightBox(); こんな感じで lightBox メソッドには引数がないケースがありますが、私のコードには引数があります。このプラグインのサイトに Extend というページがあり、引数に渡せるパラメータが記載されています。
特に画像関係のパスについて指定が無い場合のデフォルト値は images/lightbox-blink.gif などといった指定になります。そうすると TypePad のようにアーカイブを階層で表現する構成ではデフォルト値は適さないので、上記のコードのように引数で画像のパスを渡すようにしています。その他、私はちょっとだけアレンジしていて、
overlayOpacity: 0.6,
を指定して、透過度を若干変更しています。
それから jQuery で有用だと感じたのは filter(function(){}) の記法です。return true; となればその変更が適用されるというもので、filter というよりは callback を埋め込むという感じです。メソッドチェーンを切らすことなく出来るのはとてもいい感じです。
WEB+DB PRESS Vol.41
jQuery のメソッドチェーンの楽しさと CSS セレクタの便利さに触れると jQuery はやめられなくなります。気持ちいいと思いますのでみなさんも何かアイデアを jQuery を使って実現してみてはいかがでしょうか？
ブログに写真を貼るのが楽しくなると思います。どうぞご利用ください
下の画像をクリックすると lightbox 風に表示されますのでお試しください
seealso:
- jQuery lightBox plugin
- jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」
- ブログで使っているprototype.js を jQuery へ移行（スライドショー, ハイライトなど）
- WEB+DB PRESS Vol.41
Comments