余談ですが，”サムネイル”の意味は，”複数の画像を元のサイズより小さくして，一覧で表示すること”と理解しているので，上の用法でサムネイルと呼ぶのは違和感がありますね．”一枚でもサムネイル”って”一本でもニンジン”じゃないんだから(笑) 冗談はさておき，”画像縮小””縮小表示”と言った方が適当だと思います．
HTML
<img src="画像URL" alt="ファイル名" width="***" height="***" />
サムネイル
<a href="画像URL" onclick="
window.open('画像URL','popup',
'width=***,height=***,scrollbars=no,resizable=no,
toolbar=no,directories=no,location=no,menubar=no,
status=no,left=0,top=0'); return false"><
img src="サムネイル画像URL" alt="ファイル名"
width="150" height="142" border="0" /></a>
当ブログでは，写真は，サイズが元から小さいものはそのまま上げてますが，それ以外（これがほとんどですが）「サムネイル」を使っています．これは，大きい画像をそのまま表示させると記事がそれだけ下に伸びますし，デザイン的にも好きではないといった理由のためです．でも，読む方としては，画像をクリックする毎に新しいウィンドウがポップアップすると，一々クローズする作業が発生し，面倒くさいです．
そこで巷では有名らしい「Lightbox JS」を実装してみました．とてもいいです．このJavaScriptの作者であるLokesh Dhakar氏のサイトには，「Lightbox JS」について，以下のような説明がされています．
Lightbox JS is a simple, unobtrusive script used to to overlay images on the current page. It's a snap to setup and works on all modern browsers.百聞は一クリックにしかず．下の写真をクリックしてみてください．
（Lightbox JSは現在のページ上に画像を重ね合わせて表示させるためのシンプルで簡単なJavaScriptです．このスクリプトはセットアップは容易で，現行の全てのブラウザで動作します）
国道419号線 矢勝川にて
Cool! Awesome! Thumb up! カッコイイっす．
- 別窓が開いてしまった場合は，ブラウザのJavaScriptが無効になっています．設定画面で有効にする必要があります
やり方は文末にあげたリンクに詳しく説明されていますので参考にしてください．ここでは私が行ったseesaa(Movable Type系)での手順を紹介します．
- (1)
- 「lightbox JS」サイトから以下の4つファイルをダウンロード
lightbox.js lightbox.css overlay.png loading.gif - (2)
- "lightbox.js"の下記の箇所をテクストエディターで修正
35行目付近にある以下の2行のURLを絶対パスに修正var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
↓
var loadingImage = 'https://road-blog.up.seesaa.net/lightbox/loading.gif';
var closeButton = 'https://road-blog.up.seesaa.net/lightbox/close.gif';- 後程ファイルをアップロードしますが，ここでは，https://road-blog.up.seesaa.net/lightbox というフォルダー内にファイルをアップロードしたという前提で説明しています
- (3)
- "lightbox.css"の下記の箇所をテキストエディターで修正
14行目と19行目にある"overlay.png"を絶対パスで表示#overlay{ background-image: url(overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.
Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
↓
#overlay{ background-image: url(http://www.road-blog.up.seesaa.net/lightbox/overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.
Microsoft.AlphaImageLoader(src="http://www.road-blog.up.seesaa.net/lightbox/overlay.png", sizingMethod="scale");
}- "blank.gif"というのも気になりますが，ファイルが存在しないのでそのままにしました
- (4)
- "lightbox.js","overlay.png","loading.gif"をアップロード
"lightbox"などわかりやすいフォルダー名をつけ，その中にアップ．
ここでは，https://road-blog.up.seesaa.net/lightboxというフォルダー内にファイルをアップロードしたという前提で説明しています - (5)
- スタイルシートの編集（デザイン→スタイルシート）
"lightbox.css"の全てをコピペ - (6)
- HTMLの編集（デザイン→HTML）
以下の文を<head>〜</head>内に追加（どこでもよいはずですが，</head>直前に追加）<script type="text/javascript" src="https://road-blog.up.seesaa.net/lightbox/lightbox.js">
</script>- URLは絶対パスで記述（<% blog.page_url %>/lightbox〜ではurlが間違っていますので動作しません）
- （2006-07-02 誤記修正）src="{https://road-blog.up.seesaa.net/lightbox/lightbox.js}" の "{}"を削除
- (7)
- 再構築
- (8)
- 記事に貼る画像のHTMLに rel="lightbox" を追加
<a href="拡大画像URL" rel="lightbox" ><img src="サムネイル画像URL" alt="○○○" /></a>
- 関連リンク：
- Lightbox JS by Lokesh Dhakar
- 「Lightbox JS で画像を表示する」from 小粋空間
- 「Lightbox JS の Movable Type での不具合を修正する」from 小粋空間
- 「Lightbox JS で画像を表示する」from 小粋空間
seesaa blog で lightbox.js を実装しようとしていたのですが、自分でやってみる前にどなたか既にやっている方がいないかなーと思って検索しましたら、yanzさんのこの記事にたどり着きました。
非常に分かりやすく記載されていて実装することができました。
ありがとうございました。
#trackbackを送ってしまいました。
ではでは。
秋元@サイボウズ研究所プログラマーBlog さんのところで、おもしろそーなサムネイル画像表示方法をみつけたのでトラックバックしてしまいました。
出展は下記のようです。
http://diverged.org/thumbnail/
いろいろ考えますねー。ではでは。
既にご存知かもしれませんが、lightbox JS 2.0がリリースされているみたいです。
http://www.huddletogether.com/projects/lightbox2/
今回実装されたエフェクトも結構かっこいいです。
いろいろ考えますねー。
ではでは。
辺境の地においで下さった上に
温かいコメントまでありがとうございました。
ワタクシがLightbox Plusの導入
を志向することが出来たのもこのページに
めぐり合うことが出来たからこそで
あると思っています。
今後もこっそりお邪魔して
楽しませていただく所存であります。
取り急ぎご連絡まで。
このエントリーには，スパムコメントが多いので承認制にしていますので表示が遅くなりました．ご了承ください．
いえいえ．こちらこそそこまで言ってもらえて嬉しいかぎりです．
かなり偏ったことを書いてるときもありますが，よかったらまたお越しください．
またわざわざ修正箇所をご指摘いただきありがとうございました。
ただ修正後も動かないので、何か根本的な間違いを犯してる可能性大です(^^;)。
ちょっとじっくりやり直してみます。
しかしブログのカスタマイズも奥が深いですね〜。
ではまた。
指摘した箇所を修正してもらっても，うまくいかないですか．
今確認したところ，直ってますね．あと，CSSの中身もOKです．ということは，lightbox.JSの中身の修正に間違いないかですね．基本的なことですが，lightboxというフォルダを作ってそこに全てのファイルが保存されていますよね？
こちらが無断でTBだしたのに・・・
私も同感で、写真を出す以外のアニメーションのあるVer2よりver1の方が好きです
ご存知かもしれませんが，lightboxを驚異的に汎用化した”shadowbox”が出ましたね．これほどまでにクローンが現れるlightboxは画期的なスクリプトだったのでしょうね．
またよかったらお越しください．