:: Lightbox JS〜ポップアップさせずにサムネイル画像を表示



blogのエントリーで写真を使用する場合,seesaaでは,以下のような「HTML」と「サムネイル」が選択できるような機能が実装されています.「HTML」は表示するだけ,「サムネイル」の場合は記事内はサイズ限定の画像(150x142)を表示し,画像をクリックすると新しい窓が開いて元の画像を表示します.

余談ですが,”サムネイル”の意味は,”複数の画像を元のサイズより小さくして,一覧で表示すること”と理解しているので,上の用法でサムネイルと呼ぶのは違和感がありますね.”一枚でもサムネイル”って”一本でもニンジン”じゃないんだから(笑) 冗談はさておき,”画像縮小””縮小表示”と言った方が適当だと思います.

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です.このスクリプトはセットアップは容易で,現行の全てのブラウザで動作します)
百聞は一クリックにしかず.下の写真をクリックしてみてください.

IMGP0292.JPGRIMG0270.JPG
        国道419号線                矢勝川にて

Cool! Awesome! Thumb up! カッコイイっす.

雷
別窓が開いてしまった場合は,ブラウザのJavaScriptが無効になっています.設定画面で有効にする必要があります
Lokesh Dhakarさんのサイトにも実装方法の説明がありますが,yujiroさんが「小粋空間」で丁寧に説明されており,参考にさせてもらいました.
やり方は文末にあげたリンクに詳しく説明されていますので参考にしてください.ここでは私が行った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 = 'http://road-blog.up.seesaa.net/lightbox/loading.gif';
var closeButton = 'http://road-blog.up.seesaa.net/lightbox/close.gif';
雷
後程ファイルをアップロードしますが,ここでは,http://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"などわかりやすいフォルダー名をつけ,その中にアップ.
 ここでは,http://road-blog.up.seesaa.net/lightboxというフォルダー内にファイルをアップロードしたという前提で説明しています

(5)
スタイルシートの編集(デザイン→スタイルシート)
"lightbox.css"の全てをコピペ
(6)
HTMLの編集(デザイン→HTML)

以下の文を<head>〜</head>内に追加(どこでもよいはずですが,</head>直前に追加)
<script type="text/javascript" src="http://road-blog.up.seesaa.net/lightbox/lightbox.js">
</script>
雷
URLは絶対パスで記述(<% blog.page_url %>/lightbox〜ではurlが間違っていますので動作しません)
雷
(2006-07-02 誤記修正)src="{http://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 小粋空間
22:37 | Comment(12) | TrackBack(5)
Tags: 
:: comments on entry
こんにちは。りょーちと申します。
seesaa blog で lightbox.js を実装しようとしていたのですが、自分でやってみる前にどなたか既にやっている方がいないかなーと思って検索しましたら、yanzさんのこの記事にたどり着きました。
非常に分かりやすく記載されていて実装することができました。
ありがとうございました。
#trackbackを送ってしまいました。
ではでは。
Posted by りょーち at 2006/01/25 13:59

りょーちさん,はじめまして.取り上げてもらいありがとうございました.自分の記事を読み返してたら,URLの間違いを発見したので,早速修正しておきました(汗);りょーちさんのblogもおもしろそうですね.そのうちお邪魔します.
Posted by yanz at 2006/01/26 00:12

yanzさん、こんにちは。りょーちと申します。
秋元@サイボウズ研究所プログラマーBlog さんのところで、おもしろそーなサムネイル画像表示方法をみつけたのでトラックバックしてしまいました。

出展は下記のようです。
http://diverged.org/thumbnail/
いろいろ考えますねー。ではでは。
Posted by りょーち at 2006/02/27 10:49

りょーちさん,コメント&TBありがとうございます.面白そうですね.早速,見て見ますね.
Posted by yanz at 2006/02/27 11:54

こんにちは。りょーちと申します。
既にご存知かもしれませんが、lightbox JS 2.0がリリースされているみたいです。

http://www.huddletogether.com/projects/lightbox2/

今回実装されたエフェクトも結構かっこいいです。
いろいろ考えますねー。
ではでは。
Posted by りょーち at 2006/03/30 19:04

おお!りょーちさん.その情報は,知りませんでした.UPGRADEするかどうか,じっくり検討してみます.まだbugがあるみたいだし,しばらく待った方ががいいかなあ.ありがとうございました.
Posted by yanz at 2006/03/30 19:43

yanz様

辺境の地においで下さった上に
温かいコメントまでありがとうございました。

ワタクシがLightbox Plusの導入
を志向することが出来たのもこのページに
めぐり合うことが出来たからこそで
あると思っています。

今後もこっそりお邪魔して
楽しませていただく所存であります。

取り急ぎご連絡まで。
Posted by ちょうすけ。 at 2006/05/26 21:13

ちょうすけ。さん,書込みありがとうございます.
このエントリーには,スパムコメントが多いので承認制にしていますので表示が遅くなりました.ご了承ください.
いえいえ.こちらこそそこまで言ってもらえて嬉しいかぎりです.
かなり偏ったことを書いてるときもありますが,よかったらまたお越しください.
Posted by yanz at 2006/05/27 21:00

yanzさん、ご挨拶が遅れました。
またわざわざ修正箇所をご指摘いただきありがとうございました。
ただ修正後も動かないので、何か根本的な間違いを犯してる可能性大です(^^;)。
ちょっとじっくりやり直してみます。
しかしブログのカスタマイズも奥が深いですね〜。
ではまた。
Posted by deck at 2006/07/02 17:38

deckさん,いらっしゃいませ.
指摘した箇所を修正してもらっても,うまくいかないですか.
今確認したところ,直ってますね.あと,CSSの中身もOKです.ということは,lightbox.JSの中身の修正に間違いないかですね.基本的なことですが,lightboxというフォルダを作ってそこに全てのファイルが保存されていますよね?
Posted by yanz at 2006/07/02 19:53

コメント頂き光栄です
こちらが無断でTBだしたのに・・・

私も同感で、写真を出す以外のアニメーションのあるVer2よりver1の方が好きです
Posted by sai at 2008/01/26 22:10

saiさん,いらっしゃいませ.

ご存知かもしれませんが,lightboxを驚異的に汎用化した”shadowbox”が出ましたね.これほどまでにクローンが現れるlightboxは画期的なスクリプトだったのでしょうね.

またよかったらお越しください.
Posted by yanz at 2008/01/28 18:28



:: feel free to leave a comment!
Name: [necessary]

E-mail:

URL:

Comment: [necessary]

Verification Code: [necessary]


**Type letters displayed in shaded area./上の4桁の数字を半角で入力下さい


!! 下のボタンを押す前に,お手数ですが上の四角に8889を半角で入力願います !!
Thanks a lot!

Trackbacks on entry

seesaa blogでLightbox.jsを使ってみる
Excerpt: 「lightbox.js」参考にさせていただきました。
Weblog: りょーちの駄文と書評
Tracked: 2006-01-25 13:52

seesaa blogでサムネイル画像をかっこよく表示
Excerpt: こんにちは、紀友則です(嘘です)。久方の・・・(略) 以前 seesaa blogでLightbox.jsを使ってみる で書いたポップアップさせずにサムネイル画像を拡大表示させる方法。yanz さん..
Weblog: りょーちの駄文と書評
Tracked: 2006-02-27 10:17

Seesaa BLOGにLightbox Plusを導入してみた
Excerpt: サムネイル画像をかっこよく拡大表示させるLightboxの拡張版、 Lightbox Plusを導入した。 Seesaa BLOGでは通常サムネイルをクリックすると別画面が開いて 拡大表示されるのだ..
Weblog: アレげな
Tracked: 2006-05-20 13:55

litebox 写真をカッコよく表示
Excerpt: lightbox2.0の軽量版にあたるliteboxを導入してみた。 つまづきそうな所は、、、 link,scriptタグのsrcを書き換えlightbox.css,litebox-1.0..
Weblog: Memo for a Moment
Tracked: 2007-01-03 21:13

ポップアップさせないサムネイル表示JS
Excerpt: 最近いろんなサイトを見るとサムネイル画像がポップアップJSを見かけるいろんな派生型が存在するみたいだが一番初期型の簡易タイプのLightbox JS 1.0を導入しようかと思う
Weblog: テクニカルラウンジ - パソコン雑記/ネタ資料
Tracked: 2008-01-24 08:33
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。