Lightbox JS で画像を表示する

Lightbox JS で画像を表示する

Posted at January 13,2006 11:55 PM
Tag:[Customize, FC2, JavaScript, MovableType, sb, SereneBach]
Lightbox JS サンプルサムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。
ということでこのエントリーにてご紹介したいと思います。

2006.10.10 追記機能改善された Litebox 1.0 の記事「Litebox 1.0 をブログに適用する」を公開しています。

0.動作

公式サイトでも確認できますが、とりあえず上のサムネイルをクリックしてください。ローディング画像が表示された後、元画像が表示されるという、お洒落なスクリプトです。
表示された画像をクリックすると元の画面に戻ります。一度表示された画像を再度クリックするとローディング画像は表示されません。

以下、このスクリプトの設定方法です。

1.ファイルのダウンロード

動作に必要なファイル(スクリプト・スタイルシート・画像)をダウンロードします。
まず下記のサイトへ進んでください。

Lightbox JS

表示されたページ一番下にある「DOWNLOAD」より下記のファイルをダウンロードできるようになってますので、それぞれのリンクをクリックしてください(IEであれば右クリックして「対象をファイルに保存」を選択)。

  • lightbox.js - JavaScriptファイル
  • lightbox.css - スタイルシート
  • overlay.png - オーバーレイ表示するための背景画像
  • loading.gif - ローディング中に表示する画像
  • close.gif - 閉じるマーク画像

2.ファイルのアップロード

ダウンロードした全てのファイル・画像を index.html と同じディレクトリにアップロードします。

Movable Type に適用させる場合の修正
Lightbox JS の Movable Type での不具合を修正するを参照ください。

FC2ブログに適用させる場合の修正
FC2ブログではファイルのアップロード先が決まっているため、lightbox.js の36行目辺りにある記述に青色部分を追加します。

var loadingImage = 'file/loading.gif';

また、lightbox.css についても、下記のように最後から2行目の部分に青色部分を追加します。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="file/overlay.png", sizingMethod="scale");

3.テンプレートの修正

lightbox.js を有効にするため、テンプレートの <head>~</head> の間に下記を追加します。

Movable Type の場合

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

Serene Bach / sb の場合

<script type="text/javascript" src="{site_top}lightbox.js"></script>

FC2ブログの場合

<script type="text/javascript" src="<%url>file/lightbox.js"></script>

またスタイルシートを読み込ませるために、light.css の中身を現在利用中のスタイルシートにコピー&ペーストするか、下記のタグを <head>~</head> 追加します。挿入位置は現在のスタイルシートを読み込んでいる link 要素のすぐ下が良いでしょう。

Movable Type の場合

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />

Serene Bach / sb の場合

<link rel="stylesheet" href="{site_top}lightbox.css" type="text/css" />

FC2ブログの場合

<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" />

4.リンクの設定

Lightbox JS を利用したい画像リンクやテキストリンクに、青色で示すように rel 属性を与えます。またオーバレイ表示させる元の画像も用意しておいてください。

<a href="hogehoge.jpg" rel="lightbox"><img src="thumbnail.jpg" alt="…" ></a>

これでリンクをクリックすればサンプルと同じ動作を行えるようになります。

5.不具合について

注:本項の内容は解消されているようです。
IEでは半透明の背景がページ全体をうまく覆うことができない場合があるようです。下記のサイトで修正方法が紹介されていますが、いくつかの試験サイトで設定したところ、IEでも正常に表示される時もありました(原因不明)。

えび日記Ligthbox JSを組み込んでみたけど、ちょっとおかしいのでちょっといじる。

またOpera8では iframe 部分等に半透明の背景が適用されませんでした。Firefoxは正常に表示されるようです。

6.ツールチップの文字を修正する

元画像が表示されると「Click to close」というツールチップが表示されますが、この言葉を変更したい場合は、lightbox.js の309行目辺りにある

objLink.setAttribute('title','Click to close');

objLink.setAttribute('title','画像をクリックすると元の画面に戻ります');

という具合に変更します。日本語を設定する場合は、lightbox.js をブログと同じ文字コードで保存するか、

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

と、スクリプトの文字コードを設定します。

7.Flash ムービーが背景画像に隠れない問題について

プログペット等の Flash は拡大画像を表示した際、背景となる PNG 画像の上に表示されるという問題があります。この問題を解消するには Lightbox JS でブログパーツ等の Flash を隠すカスタマイズを参照ください(動作を保証する内容ではありません)。

以上です。
2項のCSS修正についてはSmallStyleLightbox JS での 背景画像 (overlay.png) の配置場所を参考にさせて頂きました。またサンプル画像はEyesPicより頂きました。ありがとうございました。

2006.03.17 追記
7項を追加しました。また記述の一部を修正しました。

関連記事
トラックバックURL


トラックバック

Lightbox JSを組み込んだのだけれど from CEFA::Blog
Lightbox JSを組み込んでみたけれど…残念無念。何とか上手い方法は無いものですかね。 [続きを読む]

Tracked on January 15, 2006 10:26 AM

lightbox.jsでサムネイルをCOOLに拡大表示してみる from caramel*vanilla
レイアウトを崩さず大きな画像を表示させようと思ったらサムネイルを作りポップアップか拡大画像へリンクさせる手法があると思います。最近話題のlightbox.... [続きを読む]

Tracked on January 15, 2006 8:12 PM

Lightbox JS 導入してみた from いろんなことが起こる
MELLOW MY MIND ベイビー、メローな気分にしておくれ 幼い頃楽しかっ... [続きを読む]

Tracked on January 15, 2006 10:09 PM

coolに画像を表示する。 from 我楽
という訳で、Lightbox JS なわけだが。(笑) 最近、コメント等... [続きを読む]

Tracked on January 15, 2006 10:57 PM

Lightbox JS 導入してみる from てぃあら
サムネイルをクリックすると 半透明の背景付きで 画像を オシャレに表示してくれる Lightbox JS。小粋空間 : Lightbox JS で画像を表... [続きを読む]

Tracked on January 16, 2006 9:46 AM

モブログのテスト。 from さえらのフォトアルバム
携帯から写真を送ってみます。 [続きを読む]

Tracked on January 17, 2006 4:38 PM

Lightbox JS~ポップアップさせずにサムネイル画像を表示 from 路上の風景~landscapes on the road
blogのエントリーで写真を使用する場合,seesaaでは,以下のような「HTML」と「サムネイル」が選択できるような機能が実装されています.「HTML」... [続きを読む]

Tracked on January 20, 2006 12:02 AM

アップした写真を“Lightbox JS”とやらで表示させてみる・・・。コレはヨカ。 from Document_Not_Bound...
ブログを始めた頃に手を付けて即挫折した(笑)画像への影付け。『小粋空間』さんの... [続きを読む]

Tracked on February 3, 2006 2:38 AM

Lightbox JSいれてみた from Shady Grove
よそで見てイイナーと思っていたLightbox JSをいれてみた。私の絵ではほ... [続きを読む]

Tracked on February 3, 2006 7:18 PM

Lightbox JS と Better File Uploader from ぱにちん どっと こむ
■ Lightbox JS サムネイルをクリックすると、同一ウィンドウ上に画像を... [続きを読む]

Tracked on February 15, 2006 1:31 AM

画像表示その他もろもろ from SPHERICALMUSIC
昨日は荒んでたなぁ。心も体も。明日から土日休みってことで若干テンション取り戻してきた。 んで、使ってみるかなーなんて言っていたLightBox.js... [続きを読む]

Tracked on February 18, 2006 2:50 AM

Web2.0っぽい画像表示 from せつないぶろぐ
最近たまにみかけるWeb2.0っぽい画像の表示方法。気になったので調査。Lightbox JShttp://www.huddletogether.com/... [続きを読む]

Tracked on March 1, 2006 11:54 AM

Lightbox JS で画像! from ::: ModerateLog :::
お世話になってる小粋空間さんで紹介されている「Lightbox JS」で画像を表示するカスタマイズをしました。 [続きを読む]

Tracked on March 18, 2006 11:09 PM

Lightbox JS を利用して画像表示してみた from ツール・ド・もんち - Tour De MonChi -
先日、画像のポップアップで"Internal Server Error"が発生し... [続きを読む]

Tracked on April 10, 2006 11:52 PM

Lightbox を試してみる from BorialisのBoroBoro日記
こんばんは。ボリアリスです。 久々のブログいじりですね。 今回はタイトルにもある通り "Lightbox JS" というJavaScriptを導入して... [続きを読む]

Tracked on April 19, 2006 4:37 AM

クールなポップアップ from ミュレットの記憶 ? Memory of Mewlet ?
このページで使っているカッコよさげなポップアップのやり方について教えちゃいます。(私の作成物ではないです)≪サンプル≫必要な知識:HTMLとCSSとJav... [続きを読む]

Tracked on April 26, 2006 5:02 PM

サムネイル画像クリック後のオサレ表示 from なげやりぶろぐ
デフォルトの場合、サムネイル画像をクリックすると 別ページで元画像が表示されます。 それをオサレに表示してみないかいチミタチ!って事。 サン... [続きを読む]

Tracked on May 1, 2006 1:20 AM

Lightbox.jsで画像をオーバーレイ表示 from потё
イエイリカズマ氏のブログなどで使われてる、画像のサムネールをクリックすると同一ウ... [続きを読む]

Tracked on May 1, 2006 9:35 PM

lightbox.jsで画像表示をかっこよくする from Syunsui::徒然ブログ
小粋空間さんの記事を参考にlightbox.jsを設置しました。親切な解説のお... [続きを読む]

Tracked on May 2, 2006 7:31 AM

Lightbox JSを使う。 from EgoEco Days...
何の事かというと、サムネイル画像をクリックすると同一ウィンドウ上に表示できるスク... [続きを読む]

Tracked on May 12, 2006 7:52 PM

ブログに「Lightbox JS」を導入 from 暇人STRのブログ
小粋空間様のエントリー「Lightbox JS で画像を表示する」を参考に、当ブログに「LightboxJS」を導入しま... [続きを読む]

Tracked on May 14, 2006 2:16 AM

ステキな画像 from チョコレート
前にも画像をクリックしたら実物大でホップアップしてその窓をクリックしたら閉じるというのを組み込んでいたのだけど、気付いたら使わなくなってた(^-^;いくつ... [続きを読む]

Tracked on May 25, 2006 11:03 AM

Lightbox の種類 from WEBLOG - garissさんのブログ - 『STUDIO KINGS』
同ウィンドウ内でPOPUPのような動作をするjavascriptライブラリ!Lightbox! 探してみると色々あるので、書きとめておこう! ... [続きを読む]

Tracked on June 14, 2006 1:13 AM

Lightbox JSを導入してみました from 「R*K」 Positive.
ブログを訪問していると凄くお洒落に画像をサムネイル表示をされているのを見てFC2ブログでも出来ないかな?と思い一度試したものの挫折・・・。 そこで色々探... [続きを読む]

Tracked on August 6, 2006 3:24 PM

Lightbox JS で画像の表示に変化を付ける。 from 我が家のブログ (臨時)
「小粋空間」さんのところで見つけた、Javaを使った画像表示に変化を付ける仕組み... [続きを読む]

Tracked on August 11, 2006 10:32 PM

Lightbox JS で画像の表示に変化を付ける。 from 我が家のブログ
「小粋空間」さんのところで見つけた、Javaを使った画像表示に変化を付ける仕組み... [続きを読む]

Tracked on August 14, 2006 9:39 PM

lightbox.js v1.0 from CODE-0
フォトアルバムや、商品カタログなんかに使えそうなスクリプト。 サンプルは結構クー... [続きを読む]

Tracked on September 11, 2006 11:59 AM

Lightbox1.0&ローディング画面が出ない場合 from || UTAGAME ||
現在2.0も出てるLightbox。画像をポップアップさせずに、画面上に大きく表示するJavaScriptです。1.0と2以降は画像の表示方法などが違うの... [続きを読む]

Tracked on September 23, 2006 1:02 AM

Lightbox JS 2.0 設置 from trial and error ?試行錯誤?
僕のブログにもLightbox JS 2.0を入れてみることにしました。 Li... [続きを読む]

Tracked on October 8, 2006 5:41 AM

LightboxJS(画像サムネイル表示のJavaScript)導入 from whatever will be OK. -next phase-
なんじゃらほい、ってことで特に意味もなくアップした画像でサンプルにしてみました... [続きを読む]

Tracked on October 19, 2006 7:22 AM

Lightbox JS v2で画像表示 from chakiの部屋
これを使えば画像をクールに、画面遷移や新規ウィンドウなしに表示することができる。... [続きを読む]

Tracked on October 31, 2006 1:33 PM

lightboxを導入しました from 三浦仮想研究所
 画像リンクをクリックした際、ファイルがポップアップして表示されるlightboxを導入しました。 マニュアル通りやったにも関わらずOpera&Firef... [続きを読む]

Tracked on November 11, 2006 3:49 PM

Lightbox Wordpress Plugin from Foxhole13
サムネイル画像をカッコ良く拡大してくれるLightbox JS v2.0。 Movable Typeでは小粋空間さんのLightbox JS で画像を表示... [続きを読む]

Tracked on November 21, 2006 12:31 AM

Litebox 1.0をFC2ブログで導入する方法 from StockWeb
最近ではSoftBankのサイトでも見かけるほど広まってきた"Litebox"。Liteboxとは?と思われた方は左のサムネイルの画像をクリックしてみて下... [続きを読む]

Tracked on January 24, 2007 12:49 AM

画像の小技ネタw from 刹那な日記
この画像をクリックすると面白い表示をします^^こんなのにハマッていじってました^^;ってかお前暇人か(笑)記述とか滅茶苦茶かもしんないですが(適当にぶち込... [続きを読む]

Tracked on January 29, 2007 12:32 AM

画像拡大表示 from rust
本サイトの旅行記頁では、画像をクリックすると大き目のサイズで表示するようにしてい... [続きを読む]

Tracked on February 7, 2007 8:19 PM

Lightbox JSで画像表示 from ぐうだらですけどなにか?
これこれ、すっごくやりたかったんす。 だって、かっこいいくね?いくね? 毎度、小粋空間さまのLightbox JSで画像を表示するの記事を拝見いた... [続きを読む]

Tracked on February 8, 2007 7:18 PM

Movable Typeで携帯投稿、写真ブログを作る from ウェブとか音楽とか日記とか
MovableTypeで構築されたブログに、携帯から画像を添付して、その画像を... [続きを読む]

Tracked on February 25, 2007 5:28 PM

Lightbox JS で画像を表示してみる。 AJAX? WEB2.0? from masa.under.jp [blog]
最近ブログ等で画像のサムネイルをクリックすると、画面がブラックアウトしてその画像... [続きを読む]

Tracked on March 29, 2007 10:45 AM

カコよく画像拡大。Lightbox JS で画像を表示してみる。 AJAX? WEB2.0? from masa.under.jp [blog]
最近ブログ等で画像のサムネイルをクリックすると、画面がブラックアウトしてその画像... [続きを読む]

Tracked on March 29, 2007 11:18 AM

Lightbox:サムネイル画像クリックで格好良く画像をオーバレイ from DIS is the BLOG
ブログやホームページに貼り付けた画像のサムネイル... [続きを読む]

Tracked on December 24, 2007 12:46 AM

[web][plugin][css]Lightbox系ライブラリのまとめ from ebi's diary
Lightboxをかなり前にこのサイト導入していますがその際に若干不具合があった(ようにみえた)ので、自分なりに修正し、その内容を公開していました。 e... [続きを読む]

Tracked on December 29, 2007 6:23 PM

ライトボックスノススメ! from S・G・O blog
サムネイルをクリックすると、新しいウインドウやタブを開かずに 元画像が開く、イカスブログツール「ライトボックス」‚... [続きを読む]

Tracked on January 21, 2008 8:54 PM

Lightbox:サムネイル画像クリックで格好良く画像をオーバレイ from TRASH
ブログやホームページに貼り付けた画像のサムネイル... [続きを読む]

Tracked on February 27, 2008 5:41 PM

lightbox from WD style
ちまたで流行のlightbox。 そういう私も結構お世話になっているのですが、古いサイトをリニューアルするときに使おうと思っても、html... [続きを読む]

Tracked on May 13, 2008 3:50 PM

画像をpopupさせるlightbox.js設置 from Ck2 Blogger
大きい画像を縮小表示にして、クリックするとポップアップして本来の画像の大きさで見れるというスクリプトを仕込んでみました。例えば、こんな感じ。↓の画像をクリ... [続きを読む]

Tracked on June 8, 2008 8:52 PM

LightBoxの使い方とカスタマイズ方法 from CSS Lecture
Lightbox JS v2.0は知っている方も多いと思いますが、基本的な使い方とカスタズって言える程ではないですが、Lightbox表示中の「背景の色... [続きを読む]

Tracked on September 24, 2008 3:48 PM

「Lightbox」でお洒落に画像を表示する from フォトログはじめました
ブログなどで『サムネイル画像をクリック!! → 拡大画像が別ウィンドウで表示』・... [続きを読む]

Tracked on January 5, 2009 10:05 PM
コメント

先日の「Lightbox JS で画像を表示する」の質問の件早速エントリーして頂きありがとございます そこで、一番理解できなかった4項のところがやはり理解できません。当blogの携帯電話機種変更のとろこの画像をこのscriptを利用して表示させたいと思っております。現在は、下記のようにサムネイル表示させておりますがどのように訂正すればいいでしょうか?お手数おかけしますがサポートお願いします。

<p> <a onclick="window.open('http://vita.qee.jp/BW_Upload/CIMG2114.jpg' rel="lightbox"','NewWin','width=260,height=340,resizable=no');return false;" href="#"><img height="156" alt="CIMG2114.jpg" hspace="0" src="http://vita.qee.jp/BW_Upload/tm_CIMG2114.jpg" width="117" align="left" border="0" /></a><a href="#"></a> </p> <p align="left">
[1] Posted by panser : January 14, 2006 10:14 PM

>panserさん
こんばんは。
ご質問の件ですが、下記のようになると思います(pタグは省略しています)。

<a href="http://vita.qee.jp/BW_Upload/CIMG2114.jpg" rel="lightbox"><img height="156" alt="CIMG2114.jpg" hspace="0" src="http://vita.qee.jp/BW_Upload/tm_CIMG2114.jpg" width="117" align="left" border="0" /></a>

以上です。
それではよろしくお願い致します。

[2] Posted by yujiro : January 15, 2006 1:21 AM

このスクリプトですが、インデックスページでやると上手く表示されるのですが、個別アーカイブやカテゴリアーカイブでやるときちんと表示されないような気がします。この小粋空間のサンプル画像も個別アーカイブのページではきちんと表示されていないような気がしますが、これは私のブラウザのせいでしょうか。それとも何か理由があるのでしょうか。当方のブログでも試してみたのですが、同様の症状です。色々と試行錯誤してみましたが上手くいかないようです。。

[3] Posted by yg : January 15, 2006 2:20 PM

こんばんわー。

というわけで、からましてもらいました。(笑)
個別エントリーで機能しないのは、どうもパスの設定のような気が…。

Lightbox JS 用のスタイルシート内の url を設定するところをデフォルトから相対パスに変更したら、透過画像まで表示してくれるようになったんだけど、エラーが出てデバッカが立ち上がっちゃううんですよね、ieの場合。

yujiroさん解析頼んます。(笑)

[4] Posted by Border. : January 15, 2006 11:53 PM

おはようございます。おもしろいですね。
だけど、やむやむでは あんまりサムネイルをこしらえるほどの画像をアップすることもないし
あれこれ いっぱいいっぱい付いてるので、MTは またまた 実験用に作ったブログで試してみました。
で、SereneBach のほうで、導入することにしました。

[5] Posted by さえら : January 16, 2006 9:47 AM

>ygさん
こんばんは。
ご質問の件ですが、Lightbox JS の Movable Type での不具合を修正するに対処を記しましたのでご参考になれば幸いです。
それではどうぞよろしくお願い致します。

>Border.さん
こんばんは。
からみありがとうございました。(笑)
お洒落なスクリプトですよね。

>さえらさん
こんばんは。
導入ありがとうございます。
これ、なかなかいいですね。

[6] Posted by yujiro : January 16, 2006 9:28 PM

こんにちはぁ。いたく気に入っちゃったものだから
FC2ブログでも試してみたくなって、新しいブログ、作っちゃいましたよ。
ヾ(@^▽^@)ノ わはは
FC2ブログでも ちゃ???んと できました。d(^0^)b

[7] Posted by さえら : January 17, 2006 4:36 PM

>さえらさん
こんばんは。
無事に動作しているようで良かったです。
FC2も慣れるとなかなか使いやすそうですね(笑)。

[8] Posted by yujiro : January 18, 2006 12:10 AM

どうもありがとうございました。無事個別アーカイブなどでも表示されるようになりました。ところで、これを導入すると文字化けするのは私だけでしょうか。utf-8にすると文字化けが解消されるのですが、自動識別にすると必ず文字化けします。charset="utf-8"としてもだめです。

[9] Posted by yg : January 24, 2006 12:06 AM

>ygさん
こんばんは。
ご質問の件ですが、lightbox.js の文字コードが Shift-JIS で書かれているようですので、lightbox.js のファイルの文字コードを UTF-8 に変更されるか、script タグに charset="Shift_JIS" を追加されてみてはいかがでしょうか(こちらでは文字化けしておりませんので動作は未確認です)。

以上です。
それではよろしくお願い致します。

[10] Posted by yujiro : January 24, 2006 11:55 PM

お久しぶりです(笑)。
巡り巡ってこちらの記事へ辿り着いてしまいました。いつもチェックしていたつもりなのですが、仕事が忙しい時期だったせいか見落としていました(汗)。
いつもながらの親切明解な解説に感謝いたします。

[11] Posted by toycozy : February 3, 2006 2:41 AM

こんばんわー。
いつもお世話になってます^^。

これ、やっと今日手をつけましたー(笑)
うーん。かっちょいいですね。
ホントにいつも有益な情報をありがとうございます!

最近アクセス解析で気づいたのですがケータイで
見てくれてる方が多く、機種にもよるとは思いますが、その場合だと画像を見れるのが横400pxまでくらいのようで、
サムネイルは小さめ、PCの方用に大きい画像へのリンクと、
これを使えばなおさらいいですよねー。

[12] Posted by theta-P : February 3, 2006 10:28 PM

>toycozyさん
こんばんは。
ご無沙汰してます。
ご覧くださり&リンクありがとうございました。(笑)

>theta-Pさん
こんばんは。
記事参照ありがとうございます。
なるほど、携帯用にも使い分け可能ということですね!

[13] Posted by yujiro : February 5, 2006 12:59 AM

突然ですが質問させてください。
うちのサイトでもLightbox JSを導入してみたのですが、ブログパーツのうちいくつかが背景画像 (overlay.png) の上に来てしまい邪魔です。(BlogPetとかの部分です。)
これらを制御する方法(表示画像以外は全て背景画像越しに透過して見えるようにする)はありますでしょうか?
どうかよろしくお願い致します。

[14] Posted by tsu_kun : March 16, 2006 12:42 AM

>tsu_kunさん
こんばんは。
ご質問の件ですが、Lightbox JS でブログパーツ等の Flash を隠すカスタマイズでエントリーしましたので参考になれば幸いです。

以上です。
それではよろしくお願い致します。

[15] Posted by yujiro : March 17, 2006 2:21 AM

どうもありがとうございました。うまくいきました。
感激の明快親切なエントリーですね。しかもブログペットの登録まで(笑)
感謝いたします。

ただ、FlickrのZeitgeist badgeとかは諦めたほうがよさそうですね。
っていうか、いい加減重くなったので幾つか外さなくてはっ。

[16] Posted by tsu_kun : March 17, 2006 12:08 PM

>tsu_kunさん
こんにちは。
ご連絡ありがとうございました。
修正情報を頂いた後のコメントでよかったです。(笑)
ではでは!

[17] Posted by yujiro : March 17, 2006 1:59 PM

yujiroさん、こんにちは。
LightBoxJSなのですが、現在overlay.pngが表示されず、黒くクールにならないでいます。

http://mepageblog.s152.xrea.com/mt/
がURLです。
絶対パスで画像を指定したのですが・・・何か問題があったのでしょうか。

[18] Posted by pokelabo : March 19, 2006 5:13 PM

申し訳ありません。
CSSの読み込みがうまくいっていなかったようで、タグを追加したら読み込ませることが出来ました。
ご迷惑をおかけしました。

[19] Posted by pokelabo : March 21, 2006 9:37 AM

>pokelaboさん
こんばんは。
ご連絡ありがとうございました。
無事にできたようでなによりです。
ではでは!

[20] Posted by yujiro : March 22, 2006 12:39 AM

はじめまして
Lightbox JS を導入しようと頑張っているのですが上手くいきません
教えて頂けないでしょうか

DLした5つのファイルはすべて
index.html と同じディレクトリにアップロードしています

[21] Posted by ぽんママ : April 18, 2006 11:16 PM

>ぽんママさん
こんばんは。
ご質問の件ですが、「上手くいかない」というのは、「画像をクリックすると右側の枠がのびてしまう」という解釈でよろしいでしょうか(その他は正常に動作しているようです)。

であれば、スタイルシートの下記の赤色部分が影響しているようです。

/* body */ body div {     margin: 0 auto;     font-family: 'Hiragino Kaku Gothic Pro W3', 'ヒラギノ角ゴ Pro W3', Verdana, 'MS Pゴシック', sans-serif, 'Osaka';     text-align: left; }

スタイルの影響につきましてはテンプレート配布サイトにご確認くださった方が良いかもしれません。

以上です。
それではよろしくお願い致します。

[22] Posted by yujiro : April 19, 2006 9:48 PM

お久しぶりです。
参考にさせていただきましたぁー
ありがとうございます!

[23] Posted by fei : July 8, 2006 2:44 PM

>feiさん
こんばんは。
記事参照&コメントありがとうございます。
うまくできたようで良かったです。
ではでは!

[24] Posted by yujiro : July 9, 2006 12:52 AM

これ、すっごく気になってました。
素敵ですよねぇ。(゚ー゚*)。・:*:・ポワァァン。
参考にさせていただきまして、
ばっちりできました。ありがとうございます。
あわせて、トラックバックも送らせていただきました。

[25] Posted by もみぃ : February 8, 2007 7:19 PM

>もみぃさん
こんばんは。
ご利用&トラックバックありがとうございました。
うまくできたようで良かったです。
ではでは!

[26] Posted by yujiro : February 8, 2007 10:36 PM

はじめまして、

質問なのですが、
Lightboxをしようして、
COOLなポップアップを行いたいのですが、

とりあえず、『小粋空間』さんのおかげで、ポップアップは行うことが
出来るようになりました。

が、ポップアップの際の「Loding」アニメーションや
「オーバーレイ」ができません。

ファイル類は全てアップしてあります。

何が駄目なのでしょうか?
返答をお願いします。

[27] Posted by mitsu : May 21, 2007 10:20 PM

>mitsuさん
はじめまして。
ご質問の件ですが、サイトを拝見させて頂かないと適切な回答ができませんので、コメントフォームのURL欄をご入力の上、再度ご連絡ください。
それではよろしくお願い致します。

[28] Posted by yujiro : May 22, 2007 5:24 PM

こんばんわ

ポップアップの際の「Loding」アニメーションや
「オーバーレイ」がでない件について、

試行錯誤行っていたら、できるようになりました。

また、なにかわからなくなったら宜しくお願い致します。

[29] Posted by mitsu : May 23, 2007 11:16 PM

>mitsuさん
こんにちは。
ご連絡ありがとうございました。
自己解決されたようで良かったです。
ではでは!

[30] Posted by yujiro : May 24, 2007 12:56 PM

はじめまして!
いつも密かに色々な記事を参考にさせてもらっています。
今回はこの記事を参考にさせてもらってLightBoxに挑戦してみました。
少し時間が掛かりましたが、おかげさまでうまく設置できました。
いつもわかりやすい記事をありがとうございます?

[31] Posted by 大トロ : August 11, 2007 12:11 PM

>大トロさん
こんばんは。
記事参照&コメントありがとうございます。
うまくできたようでなによりです。
ではでは!

[32] Posted by yujiro : August 13, 2007 10:31 PM

こんにちわ。毎日暑いですね。
先日、LightboxJSの設置を完了したのですが、
表示がどうも腑に落ちないので、コメントしました。
URLの記事にある写真を見ていただければと思います。
この記事を表示させて、画像をクリックすると、きちんと正常に表示されるのですが、
その後、一度その元画像を閉じて、また表示させると最初に表示されたロード画像が出ないのですが、これで正常なんでしょうか?写真の大きさなんかも関係するのかなぁと・・・。

それと、yujiroさんの記事にあるコーヒーカップの写真のように、
クリックすると「小さい枠からぐぐーっと広がって写真が表示」のように、
スムーズな動きも表示されないのですが、これも何かあるんでしょうか?

MovableTypeでの不具合修正の記事を参考に手を加えてみたのですが、
わかりませんでした。
よろしくお願いします。

[33] Posted by もみぃ : August 24, 2007 12:50 PM

>もみぃさん
こんにちは。
ご連絡遅くなり申し訳ありません。

ご質問の件ですが、CSSを読み込ませるlink要素を、JacaScriptのscript要素より先に読み込ませてみてください(解消するかどうかは定かではありませんが)。

解消しないようでしたらお手数ですが再度ご連絡ください。
それではよろしくお願い致します。

[34] Posted by yujiro : September 6, 2007 11:08 AM

お返事ありがとうございました。

<script type="text/javascript" src="<$MTBlogURL$>lightbox.js"></script>
<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />

上記のタグ部分を、

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" /> 
<script type="text/javascript" src="<$MTBlogURL$>lightbox.js"></script>

のように修正してみました。
変化なしと思うのですが・・・・(T_T)。
となると、このままでしか修正のしようがないんでしょうか・・・・。

[35] Posted by もみぃ : September 18, 2007 5:19 PM

すみません。半角でタグを書いてしまいました。


<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" />

を、


<link rel="stylesheet" href="lightbox.css" type="text/css" />
<script type="text/javascript" src="lightbox.js"></script>

と修正しました。(上記のコメント削除していただければ、幸いです。)

変化なしと思うのですが・・・・(T_T)。
となると、このままでしか修正のしようがないんでしょうか・・・・。

[36] Posted by もみぃ : September 18, 2007 5:23 PM

>もみぃさん
こんにちは。
すいません。私が勘違いしておりまして、このエントリーで用いているツールは Lightbox JS ではありませんでした(色々なツールを紹介しているうちに別のツールに置き換わってしまったようです)。

下記のいずれかのツールをお使いください。

Lightbox JS v2.0
http://www.huddletogether.com/projects/lightbox2/

Litebox
http://www.doknowevil.net/litebox/

それではよろしくお願い致します。

[37] Posted by yujiro : September 20, 2007 5:09 PM

お返事ありがとうございます。
確認させていただけますか。
上記のURL、どちらかから、ファイルをダウンロードして、
この記事の手順をするということですよね。
さっそくやってみます。

[38] Posted by もみぃ : September 21, 2007 6:34 PM

>もみぃさん
こんばんは。
説明不足ですいません。
Lightbox JS v2.0は、この記事と大体同じ手順だと思います。
Liteboxはこの記事ではなく、「Litebox 1.0 をブログに適用する」を参考にしてください。
それではよろしくお願い致します。

[39] Posted by yujiro : September 21, 2007 11:42 PM

ありがとうございます。さっそくそちらの記事を参考に、やってみます。
丁寧なご指南、ありがとうございました。

[40] Posted by もみぃ : October 12, 2007 4:47 PM

はじめまして いつも参考にさせていただいております。
この度 このLightboxを導入してみたのですが、ポップアップ表示後の画像タイトルが見にくいと。。。いいますか。
漢字などが、特につぶれてしまって読めなかったりします。
文字の種類又は、大きさなどを変えたら見やすくなると思うのですが。。。。。
方法ありましたら、細かく教えていただけると嬉しいです。
宜しくお願い致します。

[41] Posted by kimkim : January 11, 2008 11:00 PM

はじめまして いつも参考にさせていただいています。

お蔭様でLightboxを導入挑戦、何事もなく成功いたしました。
ですが、ポップアップ後の画像タイトルが変更できたら。。。と思いました。
漢字などが特につぶれて、読めなかったりします。
文字種や、大きさなど変えられたら良いのに。
解決策御座いましたら、ぜひ教えていただきたいのですが。。
あまり、詳しくないので、細かく教えていただけると助かります。
どうぞ 宜しくお願い致します。

[42] Posted by kimkim : January 11, 2008 11:27 PM

>kimkimさん
こんばんは。
ご返事おそくなりすいません。
ご質問の件ですが、おそらく lightbox.css のフォント関連のプロパティを修正すれば良いと思いますが、具体的な回答がよろしければサイトのURL(画像を表示しているページ)をご連絡頂けますでしょうか。
それではよろしくお願い致します。

[43] Posted by yujiro logo : January 16, 2008 8:58 PM

はじめまして!
コチラを参考にLightboxの導入に成功しました。
ありがとうございました。
ガンプラブログですが、コチラの記事の紹介記事を書かせてもらいたく・・・
TBもうちますのでもし記事内容に問題があるようでしたら仰ってください。

[44] Posted by ショートベル : January 21, 2008 7:58 PM

>ショートベルさん
はじめまして。
記事参照&TBありがとうございました。
記事内容も特に問題ありません。
ではでは!

[45] Posted by yujiro logo : January 22, 2008 1:53 PM

はじめまして。以前からこちらのサイトは度々拝見させていただいています。
それで...恐れ多くもちょっと気づいたことを。

こちらのサイトのソースなどの表示、Vista,IE7(ちなみにSleipnir,unDonut,IE7)で見ると 一行のソース表示 が 横スクロールに覆われて そのままでは読むことができなくなっています。

私も自分のブログでソースを載せたりしていて、Vista を使うまではまったく気がつかなかったのですが、一行のものも結構あるので、色々調べて現在はきちんと表示できるようになりました。

情報元を忘れてしまったのですが...ソース表示のところ (私は div を使っていますが、こちらでは pre code あたりでしょうか?) を

div{
overflow:auto;
overflow-x:scroll;
}
html>/**/body div{
overflow:auto;
}

のようにしたら、きちんと読めるように表示できるようになりました。
Vista IE7, FireFox3 , XP IE6 などで確認済みです。

実際に一行ソースがあるのは ブログ記事からリンクしたソース用ページ などです。ちょっと記事の内容と違うかもしれませんが、コメントさせていただきました。
(ちなみに Lightbox JS 旧バージョンをちょっとだけカスタマイズして使っています。)

[46] Posted by paruparu : March 14, 2009 11:31 AM

はじめまして。以前からこちらのサイトは度々拝見させていただいています。
それで...恐れ多くもちょっと気づいたことを。

こちらのサイトのソースなどの表示、Vista,IE7(ちなみにSleipnir,unDonut,IE7)で見ると 一行のソース表示 が 横スクロールに覆われて そのままでは読むことができなくなっています。

私も自分のブログでソースを載せたりしていて、Vista を使うまではまったく気がつかなかったのですが、一行のものも結構あるので、色々調べて現在はきちんと表示できるようになりました。

情報元を忘れてしまったのですが...ソース表示のところ (私は div を使っていますが、こちらでは pre code あたりでしょうか?) を

div{
overflow:auto;
overflow-x:scroll;
}
html>/**/body div{
overflow:auto;
}

のようにしたら、きちんと読めるように表示できるようになりました。
Vista IE7, FireFox3 , XP IE6 などで確認済みです。

実際に一行ソースがあるのは ブログ記事からリンクしたソース用ページ などです。ちょっと記事の内容と違うかもしれませんが、コメントさせていただきました。
(ちなみに Lightbox JS 旧バージョンをちょっとだけカスタマイズして使っています。)

[47] Posted by paruparu : March 14, 2009 11:34 AM

先日、コメントした者です。
コメント投稿時に数回エラー (「名前とメールアドレスは必須です」) になってしまい、最終的に同じものが2個投稿されてしまいました。本当に申し訳ありません。

先日の内容の情報入手先をまた見つけたので載せておきます。

IE7をインストールしてみた - サラリーマン白書
http://weblog.2-d.jp/pc/internet/000010.php

記事によると、こちらの記事 「IE7のCSSハック」 を参考にしたとありました。確認不足で申し訳ありません。

[48] Posted by paruparu : March 16, 2009 1:13 AM

>paruparuさん
こんばんは。
ご返事遅くなってすいません。
ようやく修正しました。
ご指摘ありがとうございました。
ではでは!

[49] Posted by yujiro logo : March 29, 2009 2:29 AM

こんにちは。
いつも記事を参考にさせていただいてます。

fc2ブログにて上記の手順でやってみたところ、さくさくと設置できました。
ありがとうございます。

しかし2点ばかし気になることが──
close画像が表示されません。
実はoverlay画像も表示されなかったのですが、こちらはCSSを修正したら表示されるようになりました。
close画像も同じようにCSS修正で表示されるのかもですが、
ごめんなさい、私にはどこをいじればいいのかわかりません。
でも画像をクリックして閉じるほうが早いので、別に表示されないままでもいいかなとも思います。

ふたつめは、lightboxを閉じると、元の位置ではなくページの最上部に戻っていることです。
画像の多いブログなので、このままだとかなり面倒なことになります。
こちらはスクリプトのどこかを修正することで解消されるのでしょうか?
恐ろしくてとても修正などできません。

以上、お手数をお掛けしますがよろしくお願いします。

[50] Posted by 鹿谷門実 : March 6, 2011 6:02 PM

>鹿谷門実さん
こんばんは。
ご質問の件ですが、サイトのURLをご連絡いただけますでしょうか。
公にできない場合は、以下のページからご連絡ください。

http://www.koikikukan.com/mail.php

それではよろしくお願い致します。

[51] Posted by yujiro logo : March 8, 2011 3:03 AM

失礼しました。
開設準備中でお見苦しいですが。

あれからテンプレを変更したりといろいろ可能性を探ってみました。
追記を開くスプリプトが影響してるのでしょうか?

書き忘れましたが、不具合が出るのはINDEXエリアと検索エリアです。
個別ページ、カテゴリ、アーカイブエリアでは正常に動きます。

ご面倒をお掛けしますが、よろしくおねがいします。

[52] Posted by 鹿谷門実 : March 8, 2011 7:16 PM

>鹿谷門実さん
こんばんは。
拝見したところ、lightbox.jsの、

var loadingImage = 'http://~/loading.gif';		
var closeButton = 'http://~/close.gif';

に設定しているURLの部分が誤っているようです(URLをブラウザに直接入力すると404 Not Foundになります)。close画像とloading画像のアップロード先をご確認ください。

lightboxを閉じるとページトップに戻る事象はこちらでは確認できませんでした。
それではよろしくお願い致します。

[53] Posted by yujiro logo : March 9, 2011 12:28 AM

失礼いたしました。
画像のアップロード先、確認しました。

お手数お掛けしました。
ありがとうございます。

[54] Posted by 鹿谷門実 : March 9, 2011 8:58 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)