最近よく見かけるサム..." /> Lightbox.jsで画像を表示とアップロードの編集:magnet :..
トップ –> MovableType Tips –> Lightbox.jsで画像を表示とアップロードの編集

MovableType Tips

Lightbox.jsで画像を表示とアップロードの編集

sample_lightbox.jpg  最近よく見かけるサムネイル画像をクリックするとポップアップせずに、半透明の背景になり画像が表示されるLightboxをご紹介します。

 まずは左の画像をクリックして体験してみてください。
表示された画像をもう一度クリックするか、画像右上の「X」もしくは「press X to close」をクリックすると戻ります。


1.lightbox.js のダウンロード
Lightbox JS のサイトから必要なファイルをダウンロードしてください。(2006.4現在 ver2.0)
ダウンロードする場所は、サイトの中間部の「DOWNLOAD:」のところです。

[ ダウンロードするファイル ]
・ lightbox.js   ・ lightbox.css  ・ overlay.png  ・ loading.gif  ・ close.gif

各ファイル名をクリックすると各ファイルの画面に移動します。
スクリプト(.js)、スタイルシート(.css)はリンク先のページを同じ名前で保存してください。
画像(.png .gif)は、画像上で右クリックして画像を保存してください。
(ドラックしてデスクトップに移動しても保存できます)

overlay.png overlay_green.png overlay_blue.png
overlay_yellow.png overlay_red.png overlay_orenge.png
overlay.png が少し濃すぎるように感じたので、新しく作ってみました。ご自由に利用してください。Lightboxで利用する際は、ファイル名を「overlay.png」に変更してください。

2.ファイルをアップロード
lightbox.css以外のファイルをindex.html(もしくはindex.php)のあるディレクトリにアップロードします。

3.テンプレート、スタイルシートの編集

・テンプレートの編集
メインページ、カテゴリーアーカイブ、エントリー(個別)アーカイブの<head>~</head>の間に下記を追加してください。

<script type="text/javascript" src="<<$MTBlogURL$>lightbox.js"></script>

・スタイルシートの編集
lightbox.cssのソースをコピーし、ブログのスタイルシート(例:styles-site.css)に追加します。

これで準備は完了です。あとはアップロードした画像のHTMLに rel="lightbox" を追加するだけです。

例: <a href="http://****.jp/images/****.jpg" rel="lightbox" title="caption" >
<img width="250" height="150" border="0" align="left" alt="****" src="http://****.jp/images/****-thumb.jpg" />

title="caption" を挿入すると画像の説明文(caption)を入れることができます。captionの部分に画像の説明文を記入してください。

ここで画像をアップロードする度に rel="lightbox" を追加するのは面倒なので、アップロードしたときに rel="lightbox" がつくようにします。

4.CMS.pm の編集
MTのディレクトリの /lib/MT/App/ にあるCMS.pm をダウンロードしてきて、3604行目(MT3.2)4789行目(MT3.3)にrel="lightbox"を追加します。

<a href="$url " rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

上書き保存して、上書きアップロードして終了です。
アップロード時の画像の設定は、「ポップアップ」ではなく「埋め込み」です。お間違えないように・・・

参照先:MovableType備忘録さん「画像アップロード時にrel属性を追加

トラックバック

【ブログタイトル】 MovableType備忘録
【記事タイトル】 サムネイルをLightbox JSで表示してみる
【記事概要】 MovableType(ムーバブルタイプ)では、標準で元イメージをサムネイルにしてくれる機能が備わっています。 とはいっても、Image::Magickと... [ 詳しくはこちら ]

【ブログタイトル】 ネトゲ哲学
【記事タイトル】 lightbox 導入しました
【記事概要】 以前知り合いのサイトに SimpleBox さま作成(改造?)の lightbo... [ 詳しくはこちら ]

【ブログタイトル】 ++Blog-MELL++
【記事タイトル】 Lightbox JS を 使ってみる♪
【記事概要】 Lightbox JS を 使って 画像を 表示させてみます ▼ の 画像をクリ... [ 詳しくはこちら ]

ご意見・ご感想 (4)

Xanaviさん、コメントありがとうございます。
良い情報が提供できたらと思います^^
技術情報提供のブログというより、わたし自身が忘れないようにするためのブログなんですけどね^^;
こちらもまた覗かせて頂きますね。ヨロシク

コメントいただきありがとうございます。
TBささせていただきました Xanavi です。
ブログそのものにまだまだなれていなくて・・・
何といいますか・・・実はまだ下書きだったのに間違えて公開して保存してしまっていたのでした(^^;;;
これからもちょくちょく覗かせていただきますね。

では。

コメントありがとうございます^^
IEは、正常に表示されるときとされないときとあるようですよ。原因はわかりませんw
確かにIEには足ひっぱられますね。

こんにちわ^^

Lightbox JS の記事とっても参考になりました。
ですが、わたしの方では Firefox では確認できたのですが、IE では 普通に表示されてしまいました(汗

また IE かぁ…と思うと、ホントうんざりです。

では…。

ご意見・ご感想を投稿

・ 商品に対するお問い合わせも受け付けております。
・ ご意見・ご感想の内容は確認後表示されます。しばらくお待ちください。
・ 本サイトと無関係の内容は、削除いたします。ご了承ください。

January 3, 2007

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Index