Lightbox JS で画像を表示する
サムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。 ということでこのエントリーにてご紹介したいと思います。 |
2006.10.10 追記:機能改善された Litebox 1.0 の記事「Litebox 1.0 をブログに適用する」を公開しています。
0.動作
公式サイトでも確認できますが、とりあえず上のサムネイルをクリックしてください。ローディング画像が表示された後、元画像が表示されるという、お洒落なスクリプトです。
表示された画像をクリックすると元の画面に戻ります。一度表示された画像を再度クリックするとローディング画像は表示されません。
以下、このスクリプトの設定方法です。
1.ファイルのダウンロード
動作に必要なファイル(スクリプト・スタイルシート・画像)をダウンロードします。
まず下記のサイトへ進んでください。
表示されたページ一番下にある「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でも正常に表示される時もありました(原因不明)。
また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修正についてはSmallStyle:Lightbox JS での 背景画像 (overlay.png) の配置場所を参考にさせて頂きました。またサンプル画像はEyesPicより頂きました。ありがとうございました。
2006.03.17 追記
7項を追加しました。また記述の一部を修正しました。
- Litebox 1.0 の rel 属性を自動付与する
- Litebox 1.0 をブログに適用する
- Lightbox JS の rel 属性を自動付与する
- Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す
- Lightbox JS の Movable Type での不具合を修正する
≫ Lightbox JSを組み込んだのだけれど from CEFA::Blog
Lightbox JSを組み込んでみたけれど…残念無念。何とか上手い方法は無いものですかね。 [続きを読む]
≫ lightbox.jsでサムネイルをCOOLに拡大表示してみる from caramel*vanilla
レイアウトを崩さず大きな画像を表示させようと思ったらサムネイルを作りポップアップか拡大画像へリンクさせる手法があると思います。最近話題のlightbox.... [続きを読む]
≫ Lightbox JS 導入してみた from いろんなことが起こる
MELLOW MY MIND ベイビー、メローな気分にしておくれ 幼い頃楽しかっ... [続きを読む]
≫ coolに画像を表示する。 from 我楽
という訳で、Lightbox JS なわけだが。(笑) 最近、コメント等... [続きを読む]
≫ Lightbox JS 導入してみる from てぃあら
サムネイルをクリックすると 半透明の背景付きで 画像を オシャレに表示してくれる Lightbox JS。小粋空間 : Lightbox JS で画像を表... [続きを読む]
≫ Lightbox JS~ポップアップさせずにサムネイル画像を表示 from 路上の風景~landscapes on the road
blogのエントリーで写真を使用する場合,seesaaでは,以下のような「HTML」と「サムネイル」が選択できるような機能が実装されています.「HTML」... [続きを読む]
≫ アップした写真を“Lightbox JS”とやらで表示させてみる・・・。コレはヨカ。 from Document_Not_Bound...
ブログを始めた頃に手を付けて即挫折した(笑)画像への影付け。『小粋空間』さんの... [続きを読む]
≫ Lightbox JSいれてみた from Shady Grove
よそで見てイイナーと思っていたLightbox JSをいれてみた。私の絵ではほ... [続きを読む]
≫ Lightbox JS と Better File Uploader from ぱにちん どっと こむ
■ Lightbox JS サムネイルをクリックすると、同一ウィンドウ上に画像を... [続きを読む]
≫ 画像表示その他もろもろ from SPHERICALMUSIC
昨日は荒んでたなぁ。心も体も。明日から土日休みってことで若干テンション取り戻してきた。
んで、使ってみるかなーなんて言っていたLightBox.js... [続きを読む]
≫ Web2.0っぽい画像表示 from せつないぶろぐ
最近たまにみかけるWeb2.0っぽい画像の表示方法。気になったので調査。Lightbox JShttp://www.huddletogether.com/... [続きを読む]
≫ Lightbox JS で画像! from ::: ModerateLog :::
お世話になってる小粋空間さんで紹介されている「Lightbox JS」で画像を表示するカスタマイズをしました。 [続きを読む]
≫ Lightbox JS を利用して画像表示してみた from ツール・ド・もんち - Tour De MonChi -
先日、画像のポップアップで"Internal Server Error"が発生し... [続きを読む]
≫ Lightbox を試してみる from BorialisのBoroBoro日記
こんばんは。ボリアリスです。 久々のブログいじりですね。 今回はタイトルにもある通り "Lightbox JS" というJavaScriptを導入して... [続きを読む]
≫ クールなポップアップ from ミュレットの記憶 ? Memory of Mewlet ?
このページで使っているカッコよさげなポップアップのやり方について教えちゃいます。(私の作成物ではないです)≪サンプル≫必要な知識:HTMLとCSSとJav... [続きを読む]
≫ サムネイル画像クリック後のオサレ表示 from なげやりぶろぐ
デフォルトの場合、サムネイル画像をクリックすると
別ページで元画像が表示されます。
それをオサレに表示してみないかいチミタチ!って事。
サン... [続きを読む]
≫ Lightbox.jsで画像をオーバーレイ表示 from потё
イエイリカズマ氏のブログなどで使われてる、画像のサムネールをクリックすると同一ウ... [続きを読む]
≫ lightbox.jsで画像表示をかっこよくする from Syunsui::徒然ブログ
小粋空間さんの記事を参考にlightbox.jsを設置しました。親切な解説のお... [続きを読む]
≫ Lightbox JSを使う。 from EgoEco Days...
何の事かというと、サムネイル画像をクリックすると同一ウィンドウ上に表示できるスク... [続きを読む]
≫ ブログに「Lightbox JS」を導入 from 暇人STRのブログ
小粋空間様のエントリー「Lightbox JS で画像を表示する」を参考に、当ブログに「LightboxJS」を導入しま... [続きを読む]
≫ ステキな画像 from チョコレート
前にも画像をクリックしたら実物大でホップアップしてその窓をクリックしたら閉じるというのを組み込んでいたのだけど、気付いたら使わなくなってた(^-^;いくつ... [続きを読む]
≫ Lightbox の種類 from WEBLOG - garissさんのブログ - 『STUDIO KINGS』
同ウィンドウ内でPOPUPのような動作をするjavascriptライブラリ!Lightbox! 探してみると色々あるので、書きとめておこう! ... [続きを読む]
≫ Lightbox JSを導入してみました from 「R*K」 Positive.
ブログを訪問していると凄くお洒落に画像をサムネイル表示をされているのを見てFC2ブログでも出来ないかな?と思い一度試したものの挫折・・・。
そこで色々探... [続きを読む]
≫ Lightbox JS で画像の表示に変化を付ける。 from 我が家のブログ (臨時)
「小粋空間」さんのところで見つけた、Javaを使った画像表示に変化を付ける仕組み... [続きを読む]
≫ Lightbox JS で画像の表示に変化を付ける。 from 我が家のブログ
「小粋空間」さんのところで見つけた、Javaを使った画像表示に変化を付ける仕組み... [続きを読む]
≫ lightbox.js v1.0 from CODE-0
フォトアルバムや、商品カタログなんかに使えそうなスクリプト。 サンプルは結構クー... [続きを読む]
≫ Lightbox1.0&ローディング画面が出ない場合 from || UTAGAME ||
現在2.0も出てるLightbox。画像をポップアップさせずに、画面上に大きく表示するJavaScriptです。1.0と2以降は画像の表示方法などが違うの... [続きを読む]
≫ Lightbox JS 2.0 設置 from trial and error ?試行錯誤?
僕のブログにもLightbox JS 2.0を入れてみることにしました。 Li... [続きを読む]
≫ LightboxJS(画像サムネイル表示のJavaScript)導入 from whatever will be OK. -next phase-
なんじゃらほい、ってことで特に意味もなくアップした画像でサンプルにしてみました... [続きを読む]
≫ Lightbox JS v2で画像表示 from chakiの部屋
これを使えば画像をクールに、画面遷移や新規ウィンドウなしに表示することができる。... [続きを読む]
≫ lightboxを導入しました from 三浦仮想研究所
画像リンクをクリックした際、ファイルがポップアップして表示されるlightboxを導入しました。 マニュアル通りやったにも関わらずOpera&Firef... [続きを読む]
≫ Lightbox Wordpress Plugin from Foxhole13
サムネイル画像をカッコ良く拡大してくれるLightbox JS v2.0。
Movable Typeでは小粋空間さんのLightbox JS で画像を表示... [続きを読む]
≫ Litebox 1.0をFC2ブログで導入する方法 from StockWeb
最近ではSoftBankのサイトでも見かけるほど広まってきた"Litebox"。Liteboxとは?と思われた方は左のサムネイルの画像をクリックしてみて下... [続きを読む]
≫ 画像の小技ネタw from 刹那な日記
この画像をクリックすると面白い表示をします^^こんなのにハマッていじってました^^;ってかお前暇人か(笑)記述とか滅茶苦茶かもしんないですが(適当にぶち込... [続きを読む]
≫ 画像拡大表示 from rust
本サイトの旅行記頁では、画像をクリックすると大き目のサイズで表示するようにしてい... [続きを読む]
≫ Lightbox JSで画像表示 from ぐうだらですけどなにか?
これこれ、すっごくやりたかったんす。
だって、かっこいいくね?いくね?
毎度、小粋空間さまのLightbox JSで画像を表示するの記事を拝見いた... [続きを読む]
≫ Movable Typeで携帯投稿、写真ブログを作る from ウェブとか音楽とか日記とか
MovableTypeで構築されたブログに、携帯から画像を添付して、その画像を... [続きを読む]
≫ Lightbox JS で画像を表示してみる。 AJAX? WEB2.0? from masa.under.jp [blog]
最近ブログ等で画像のサムネイルをクリックすると、画面がブラックアウトしてその画像... [続きを読む]
≫ カコよく画像拡大。Lightbox JS で画像を表示してみる。 AJAX? WEB2.0? from masa.under.jp [blog]
最近ブログ等で画像のサムネイルをクリックすると、画面がブラックアウトしてその画像... [続きを読む]
≫ Lightbox:サムネイル画像クリックで格好良く画像をオーバレイ from DIS is the BLOG
ブログやホームページに貼り付けた画像のサムネイル... [続きを読む]
≫ [web][plugin][css]Lightbox系ライブラリのまとめ from ebi's diary
Lightboxをかなり前にこのサイト導入していますがその際に若干不具合があった(ようにみえた)ので、自分なりに修正し、その内容を公開していました。
e... [続きを読む]
≫ ライトボックスノススメ! from S・G・O blog
サムネイルをクリックすると、新しいウインドウやタブを開かずに
元画像が開く、イカスブログツール「ライトボックス」... [続きを読む]
≫ Lightbox:サムネイル画像クリックで格好良く画像をオーバレイ from TRASH
ブログやホームページに貼り付けた画像のサムネイル... [続きを読む]
≫ lightbox from WD style
ちまたで流行のlightbox。
そういう私も結構お世話になっているのですが、古いサイトをリニューアルするときに使おうと思っても、html... [続きを読む]
≫ 画像をpopupさせるlightbox.js設置 from Ck2 Blogger
大きい画像を縮小表示にして、クリックするとポップアップして本来の画像の大きさで見れるというスクリプトを仕込んでみました。例えば、こんな感じ。↓の画像をクリ... [続きを読む]
≫ LightBoxの使い方とカスタマイズ方法 from CSS Lecture
Lightbox JS v2.0は知っている方も多いと思いますが、基本的な使い方とカスタズって言える程ではないですが、Lightbox表示中の「背景の色... [続きを読む]
≫ 「Lightbox」でお洒落に画像を表示する from フォトログはじめました
ブログなどで『サムネイル画像をクリック!! → 拡大画像が別ウィンドウで表示』・... [続きを読む]
先日の「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">
>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>
以上です。
それではよろしくお願い致します。
このスクリプトですが、インデックスページでやると上手く表示されるのですが、個別アーカイブやカテゴリアーカイブでやるときちんと表示されないような気がします。この小粋空間のサンプル画像も個別アーカイブのページではきちんと表示されていないような気がしますが、これは私のブラウザのせいでしょうか。それとも何か理由があるのでしょうか。当方のブログでも試してみたのですが、同様の症状です。色々と試行錯誤してみましたが上手くいかないようです。。
こんばんわー。
というわけで、からましてもらいました。(笑)
個別エントリーで機能しないのは、どうもパスの設定のような気が…。
Lightbox JS 用のスタイルシート内の url を設定するところをデフォルトから相対パスに変更したら、透過画像まで表示してくれるようになったんだけど、エラーが出てデバッカが立ち上がっちゃううんですよね、ieの場合。
yujiroさん解析頼んます。(笑)
おはようございます。おもしろいですね。
だけど、やむやむでは あんまりサムネイルをこしらえるほどの画像をアップすることもないし
あれこれ いっぱいいっぱい付いてるので、MTは またまた 実験用に作ったブログで試してみました。
で、SereneBach のほうで、導入することにしました。
>ygさん
こんばんは。
ご質問の件ですが、Lightbox JS の Movable Type での不具合を修正するに対処を記しましたのでご参考になれば幸いです。
それではどうぞよろしくお願い致します。
>Border.さん
こんばんは。
からみありがとうございました。(笑)
お洒落なスクリプトですよね。
>さえらさん
こんばんは。
導入ありがとうございます。
これ、なかなかいいですね。
こんにちはぁ。いたく気に入っちゃったものだから
FC2ブログでも試してみたくなって、新しいブログ、作っちゃいましたよ。
ヾ(@^▽^@)ノ わはは
FC2ブログでも ちゃ???んと できました。d(^0^)b
>さえらさん
こんばんは。
無事に動作しているようで良かったです。
FC2も慣れるとなかなか使いやすそうですね(笑)。
どうもありがとうございました。無事個別アーカイブなどでも表示されるようになりました。ところで、これを導入すると文字化けするのは私だけでしょうか。utf-8にすると文字化けが解消されるのですが、自動識別にすると必ず文字化けします。charset="utf-8"としてもだめです。
>ygさん
こんばんは。
ご質問の件ですが、lightbox.js の文字コードが Shift-JIS で書かれているようですので、lightbox.js のファイルの文字コードを UTF-8 に変更されるか、script タグに charset="Shift_JIS" を追加されてみてはいかがでしょうか(こちらでは文字化けしておりませんので動作は未確認です)。
以上です。
それではよろしくお願い致します。
お久しぶりです(笑)。
巡り巡ってこちらの記事へ辿り着いてしまいました。いつもチェックしていたつもりなのですが、仕事が忙しい時期だったせいか見落としていました(汗)。
いつもながらの親切明解な解説に感謝いたします。
こんばんわー。
いつもお世話になってます^^。
これ、やっと今日手をつけましたー(笑)
うーん。かっちょいいですね。
ホントにいつも有益な情報をありがとうございます!
最近アクセス解析で気づいたのですがケータイで
見てくれてる方が多く、機種にもよるとは思いますが、その場合だと画像を見れるのが横400pxまでくらいのようで、
サムネイルは小さめ、PCの方用に大きい画像へのリンクと、
これを使えばなおさらいいですよねー。
>toycozyさん
こんばんは。
ご無沙汰してます。
ご覧くださり&リンクありがとうございました。(笑)
>theta-Pさん
こんばんは。
記事参照ありがとうございます。
なるほど、携帯用にも使い分け可能ということですね!
突然ですが質問させてください。
うちのサイトでもLightbox JSを導入してみたのですが、ブログパーツのうちいくつかが背景画像 (overlay.png) の上に来てしまい邪魔です。(BlogPetとかの部分です。)
これらを制御する方法(表示画像以外は全て背景画像越しに透過して見えるようにする)はありますでしょうか?
どうかよろしくお願い致します。
>tsu_kunさん
こんばんは。
ご質問の件ですが、Lightbox JS でブログパーツ等の Flash を隠すカスタマイズでエントリーしましたので参考になれば幸いです。
以上です。
それではよろしくお願い致します。
どうもありがとうございました。うまくいきました。
感激の明快親切なエントリーですね。しかもブログペットの登録まで(笑)
感謝いたします。
ただ、FlickrのZeitgeist badgeとかは諦めたほうがよさそうですね。
っていうか、いい加減重くなったので幾つか外さなくてはっ。
>tsu_kunさん
こんにちは。
ご連絡ありがとうございました。
修正情報を頂いた後のコメントでよかったです。(笑)
ではでは!
yujiroさん、こんにちは。
LightBoxJSなのですが、現在overlay.pngが表示されず、黒くクールにならないでいます。
http://mepageblog.s152.xrea.com/mt/
がURLです。
絶対パスで画像を指定したのですが・・・何か問題があったのでしょうか。
申し訳ありません。
CSSの読み込みがうまくいっていなかったようで、タグを追加したら読み込ませることが出来ました。
ご迷惑をおかけしました。
>pokelaboさん
こんばんは。
ご連絡ありがとうございました。
無事にできたようでなによりです。
ではでは!
はじめまして
Lightbox JS を導入しようと頑張っているのですが上手くいきません
教えて頂けないでしょうか
DLした5つのファイルはすべて
index.html と同じディレクトリにアップロードしています
>ぽんママさん
こんばんは。
ご質問の件ですが、「上手くいかない」というのは、「画像をクリックすると右側の枠がのびてしまう」という解釈でよろしいでしょうか(その他は正常に動作しているようです)。
であれば、スタイルシートの下記の赤色部分が影響しているようです。
/* body */ body div { margin: 0 auto; font-family: 'Hiragino Kaku Gothic Pro W3', 'ヒラギノ角ゴ Pro W3', Verdana, 'MS Pゴシック', sans-serif, 'Osaka'; text-align: left; }
スタイルの影響につきましてはテンプレート配布サイトにご確認くださった方が良いかもしれません。
以上です。
それではよろしくお願い致します。
お久しぶりです。
参考にさせていただきましたぁー
ありがとうございます!
>feiさん
こんばんは。
記事参照&コメントありがとうございます。
うまくできたようで良かったです。
ではでは!
これ、すっごく気になってました。
素敵ですよねぇ。(゚ー゚*)。・:*:・ポワァァン。
参考にさせていただきまして、
ばっちりできました。ありがとうございます。
あわせて、トラックバックも送らせていただきました。
>もみぃさん
こんばんは。
ご利用&トラックバックありがとうございました。
うまくできたようで良かったです。
ではでは!
はじめまして、
質問なのですが、
Lightboxをしようして、
COOLなポップアップを行いたいのですが、
とりあえず、『小粋空間』さんのおかげで、ポップアップは行うことが
出来るようになりました。
が、ポップアップの際の「Loding」アニメーションや
「オーバーレイ」ができません。
ファイル類は全てアップしてあります。
何が駄目なのでしょうか?
返答をお願いします。
>mitsuさん
はじめまして。
ご質問の件ですが、サイトを拝見させて頂かないと適切な回答ができませんので、コメントフォームのURL欄をご入力の上、再度ご連絡ください。
それではよろしくお願い致します。
こんばんわ
ポップアップの際の「Loding」アニメーションや
「オーバーレイ」がでない件について、
試行錯誤行っていたら、できるようになりました。
また、なにかわからなくなったら宜しくお願い致します。
>mitsuさん
こんにちは。
ご連絡ありがとうございました。
自己解決されたようで良かったです。
ではでは!
はじめまして!
いつも密かに色々な記事を参考にさせてもらっています。
今回はこの記事を参考にさせてもらってLightBoxに挑戦してみました。
少し時間が掛かりましたが、おかげさまでうまく設置できました。
いつもわかりやすい記事をありがとうございます?
>大トロさん
こんばんは。
記事参照&コメントありがとうございます。
うまくできたようでなによりです。
ではでは!
こんにちわ。毎日暑いですね。
先日、LightboxJSの設置を完了したのですが、
表示がどうも腑に落ちないので、コメントしました。
URLの記事にある写真を見ていただければと思います。
この記事を表示させて、画像をクリックすると、きちんと正常に表示されるのですが、
その後、一度その元画像を閉じて、また表示させると最初に表示されたロード画像が出ないのですが、これで正常なんでしょうか?写真の大きさなんかも関係するのかなぁと・・・。
それと、yujiroさんの記事にあるコーヒーカップの写真のように、
クリックすると「小さい枠からぐぐーっと広がって写真が表示」のように、
スムーズな動きも表示されないのですが、これも何かあるんでしょうか?
MovableTypeでの不具合修正の記事を参考に手を加えてみたのですが、
わかりませんでした。
よろしくお願いします。
>もみぃさん
こんにちは。
ご連絡遅くなり申し訳ありません。
ご質問の件ですが、CSSを読み込ませるlink要素を、JacaScriptのscript要素より先に読み込ませてみてください(解消するかどうかは定かではありませんが)。
解消しないようでしたらお手数ですが再度ご連絡ください。
それではよろしくお願い致します。
お返事ありがとうございました。
<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)。
となると、このままでしか修正のしようがないんでしょうか・・・・。
すみません。半角でタグを書いてしまいました。
<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)。
となると、このままでしか修正のしようがないんでしょうか・・・・。
>もみぃさん
こんにちは。
すいません。私が勘違いしておりまして、このエントリーで用いているツールは Lightbox JS ではありませんでした(色々なツールを紹介しているうちに別のツールに置き換わってしまったようです)。
下記のいずれかのツールをお使いください。
Lightbox JS v2.0
http://www.huddletogether.com/projects/lightbox2/
Litebox
http://www.doknowevil.net/litebox/
それではよろしくお願い致します。
お返事ありがとうございます。
確認させていただけますか。
上記のURL、どちらかから、ファイルをダウンロードして、
この記事の手順をするということですよね。
さっそくやってみます。
>もみぃさん
こんばんは。
説明不足ですいません。
Lightbox JS v2.0は、この記事と大体同じ手順だと思います。
Liteboxはこの記事ではなく、「Litebox 1.0 をブログに適用する」を参考にしてください。
それではよろしくお願い致します。
ありがとうございます。さっそくそちらの記事を参考に、やってみます。
丁寧なご指南、ありがとうございました。
はじめまして いつも参考にさせていただいております。
この度 このLightboxを導入してみたのですが、ポップアップ表示後の画像タイトルが見にくいと。。。いいますか。
漢字などが、特につぶれてしまって読めなかったりします。
文字の種類又は、大きさなどを変えたら見やすくなると思うのですが。。。。。
方法ありましたら、細かく教えていただけると嬉しいです。
宜しくお願い致します。
はじめまして いつも参考にさせていただいています。
お蔭様でLightboxを導入挑戦、何事もなく成功いたしました。
ですが、ポップアップ後の画像タイトルが変更できたら。。。と思いました。
漢字などが特につぶれて、読めなかったりします。
文字種や、大きさなど変えられたら良いのに。
解決策御座いましたら、ぜひ教えていただきたいのですが。。
あまり、詳しくないので、細かく教えていただけると助かります。
どうぞ 宜しくお願い致します。
>kimkimさん
こんばんは。
ご返事おそくなりすいません。
ご質問の件ですが、おそらく lightbox.css のフォント関連のプロパティを修正すれば良いと思いますが、具体的な回答がよろしければサイトのURL(画像を表示しているページ)をご連絡頂けますでしょうか。
それではよろしくお願い致します。
はじめまして!
コチラを参考にLightboxの導入に成功しました。
ありがとうございました。
ガンプラブログですが、コチラの記事の紹介記事を書かせてもらいたく・・・
TBもうちますのでもし記事内容に問題があるようでしたら仰ってください。
>ショートベルさん
はじめまして。
記事参照&TBありがとうございました。
記事内容も特に問題ありません。
ではでは!
はじめまして。以前からこちらのサイトは度々拝見させていただいています。
それで...恐れ多くもちょっと気づいたことを。
こちらのサイトのソースなどの表示、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 旧バージョンをちょっとだけカスタマイズして使っています。)
はじめまして。以前からこちらのサイトは度々拝見させていただいています。
それで...恐れ多くもちょっと気づいたことを。
こちらのサイトのソースなどの表示、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 旧バージョンをちょっとだけカスタマイズして使っています。)
先日、コメントした者です。
コメント投稿時に数回エラー (「名前とメールアドレスは必須です」) になってしまい、最終的に同じものが2個投稿されてしまいました。本当に申し訳ありません。
先日の内容の情報入手先をまた見つけたので載せておきます。
IE7をインストールしてみた - サラリーマン白書
http://weblog.2-d.jp/pc/internet/000010.php
記事によると、こちらの記事 「IE7のCSSハック」 を参考にしたとありました。確認不足で申し訳ありません。
>paruparuさん
こんばんは。
ご返事遅くなってすいません。
ようやく修正しました。
ご指摘ありがとうございました。
ではでは!
こんにちは。
いつも記事を参考にさせていただいてます。
fc2ブログにて上記の手順でやってみたところ、さくさくと設置できました。
ありがとうございます。
しかし2点ばかし気になることが──
close画像が表示されません。
実はoverlay画像も表示されなかったのですが、こちらはCSSを修正したら表示されるようになりました。
close画像も同じようにCSS修正で表示されるのかもですが、
ごめんなさい、私にはどこをいじればいいのかわかりません。
でも画像をクリックして閉じるほうが早いので、別に表示されないままでもいいかなとも思います。
ふたつめは、lightboxを閉じると、元の位置ではなくページの最上部に戻っていることです。
画像の多いブログなので、このままだとかなり面倒なことになります。
こちらはスクリプトのどこかを修正することで解消されるのでしょうか?
恐ろしくてとても修正などできません。
以上、お手数をお掛けしますがよろしくお願いします。
>鹿谷門実さん
こんばんは。
ご質問の件ですが、サイトのURLをご連絡いただけますでしょうか。
公にできない場合は、以下のページからご連絡ください。
http://www.koikikukan.com/mail.php
それではよろしくお願い致します。
失礼しました。
開設準備中でお見苦しいですが。
あれからテンプレを変更したりといろいろ可能性を探ってみました。
追記を開くスプリプトが影響してるのでしょうか?
書き忘れましたが、不具合が出るのはINDEXエリアと検索エリアです。
個別ページ、カテゴリ、アーカイブエリアでは正常に動きます。
ご面倒をお掛けしますが、よろしくおねがいします。
>鹿谷門実さん
こんばんは。
拝見したところ、lightbox.jsの、
var loadingImage = 'http://~/loading.gif';
var closeButton = 'http://~/close.gif';
に設定しているURLの部分が誤っているようです(URLをブラウザに直接入力すると404 Not Foundになります)。close画像とloading画像のアップロード先をご確認ください。
lightboxを閉じるとページトップに戻る事象はこちらでは確認できませんでした。
それではよろしくお願い致します。
失礼いたしました。
画像のアップロード先、確認しました。
お手数お掛けしました。
ありがとうございます。