jQuery lightBox plugin on TypePad
今回は自分のブログに 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="http://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
の巻末でインターネットの普及について言及されていて、特にインターネットの普及により物理的な移動がなくなることに触れていました。そのドラッカーの内容とデジタルネイティブの発想が似ていると感じました。
なんだろう
と聞きたくなるほどに、TypePad にはてな関連のネタを仕込む第 3 回目。
の画像を自分の PC にダウンロードして、次に TypePad のコントロールパネルにあるファイルマネージャで今の画像をアップロードします。アップロードされた URL を http://yourname.typepad.jp/blog/images/b_entry.gif と仮定します。
。もう
クリスマス
などは 
が降るほどの肌寒さ
でしたので、コールドストーン
は結構空いてました。ので、久々に食べてきました。あの店員さんの歌は本場アメリカでは歌われていないと US の同僚に聞いたことがあります。日本独自なのかなあ？
へ誘導されました。早く行ったのはアウトレットの近くに駐車したかったから。なのに臨時って何？と思ったら、渋滞緩和のためにそうやっている模様。で、臨時駐車場
して、アウトレットの近くの駐車場
社内にありました。これは何かのキャンペーンの限定グッズでしょうか。
は久保田利伸さんの全編英語詞のアルバム「SUNSHINE MOONLIGHT」を引っ張り出してきて聴いているところです。名前も Toshi Kubota となっていて、たしかアメリカでリリースされていて、収録曲の「JUST THE TWO OF US」はローカルラジオ局でも結構流れたとか。 
します。
はてなブックマークリニューアル発表会のブロガー枠の人がいただいてきた記念品の数々を激写しました。
かな？
には
は
です。