LightBoxの使い方とカスタマイズ方法

LightBox

Lightbox JS v2.0は知っている方も多いと思いますが、基本的な使い方とカスタズって言える程ではないですが、Lightbox表示中の「背景の色」「画像周りの色」「ボタン系の画像の変更」の変更の仕方についての解説をしたいと思います。

…ここからが続き

Lightbox JS v2.0の使い方

  1. Lightbox 2ダウンロード
  2. 解凍したファイルにある「js」「css」「images」フォルダをアプロード。
  3. headタグ内に下記ソースを記述
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

変更前のHTMLソース

<p><a href="images/image-1.jpg"><img src="images/thumb-1.jpg" alt="" width="100" /></a></p>

変更後(Lightbox使用)のHTMLソース

<p><a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" alt="" width="100" /></a></p>

上記ソースの用に a タグの中に「rel="lightbox"」と追加するだけで使えちゃいます。尚画像をグループ化にしたい場合は「rel="lightbox[roadtrip]"」と記述していく事で、「rel="lightbox[roadtrip]"」がついた画像達がプレビューされていく感じです。

demo page

Lightbox JS v2.0カスタマイズ方法

背景の色を変更(デフォルトでは黒い部分)

lightbox.cssの一番下に記述してある#overlayのbackground-color: #000;となっている「#000」を任意の色に変更する。

画像周りの色を変更(デフォルトでは白い部分)

lightbox.cssの上から4つ目に指定してある#outerImageContainerと下から7つ目に指定してある#imageDataContainerのbackground-colorの色を任意の色に変更。
(変更した場合はCLOSEの画像は白のままなので、この画像を指定した色にあわせて作り直す事)

ボタン系の画像の変更

一番簡単なのが解凍後「images」フォルダに入っている画像の名前と同じに名前にし、上書きする。

ディレクトリの変更

現在「images」に入ってる画像を「images/lightbox/」と変更した場合の説明をします。

  1. lightbox.cssにある「background: url(../images/prevlabel.gif)」「background: url(../images/nextlabel.gif)」
  2. lightbox.jsにある「fileLoadingImage: 'images/loading.gif',」「fileBottomNavCloseImage: 'images/closelabel.gif',」
  3. 1と2であげた箇所の「images」となっている箇所を「images/lightbox/」に変更する。
    例:「background: url(../images/prevlabel.gif)」は「background: url(../images/lightbox/prevlabel.gif)」

demo page

追記:2/20 白い枠を消した状態

lightbox.cssに記述されている「#outerImageContainer background-color: #fff;」「#imageDataContainer background-color: #fff;」を削除します。

CLOSEとNEXTとPREVの画像を背景の色に合わせて作り変えました。

demo page

追記:5/26 NEXTとPREVの位置を変える

NEXTとPREVが指定してある部分は lightbox.css の16 17行目になります。

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

15%と指定してある部分が縦軸の指定なのでここ下の放置に配置した場合は95%に指定して下さい。

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 95% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 95% no-repeat; }

demo page

追記:7/16

image 1 of 5を非表示、NEXTとPREVがある場合は常に表示というリクエストがあったので追記にて変更部分する部分を紹介しておきます。
両方とも触るのは lightbox.css のみで大丈夫です。

image 1 of 5を非表示(24行目)

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}

の部分を

#imageData #numberDisplay{ display: none;	}

NEXTとPREVがある場合は常に表示(14行目~17行目)

#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

の部分を

#prevLink { left: 0; float: left; background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink { right: 0; float: right; background: url(../images/nextlabel.gif) right 15% no-repeat; }

と記述する事で出来ます。

demo page

追記:9/17 拡大表示時の位置を変更する 1(右上に表示)

lightbox.css(1行目)

#lightbox{ position: absolute; right: -63%; z-index: 100; line-height: 0;}

lightbox.js(231行目)

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 500);

demo page

追記:9/17 拡大表示時の位置を変更する 2

左よりで、上からの表示位置を少し下にずらした表示です。
※左下に表示はおそらく出来ないと思います。

lightbox.css(1行目)

#lightbox{	position: absolute; right: 73%; z-index: 100; line-height: 0;}

lightbox.js(231行目)

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 2);

demo page

追記:2010 11/9 キャプションを改行させる

lightbox.js

218行目(変更前)

this.imageArray.push([imageLink.href, imageLink.title]);

218行目(変更後)

var caption = imageLink.lastChild;
this.imageArray.push(new Array(imageLink.getAttribute('href'), caption.innerHTML));

lightbox.css

上記のままだと詰まってる感いっぱいなので、余白を付けたいなら、#imageData #imageDetails に下記要素(padding)を付けてやってください。

padding-bottom:10px;

キャンプション要素をクリック前には表示させたくない場合はその要素に class を指定し .none { display: none; } を指定して下さい。

demo page

Track Back

炭酸プシュ! カミジン@ファンタの平穏な日常 Blog

LightBox導入しました

拡大できるサイズの写真にはLightBoxを適応していきます(`・ω・´)LightBoxってなに?って言う方は下の画像クリックしてくださいー昨日上げた写...

by 炭酸プシュ! カミジン@ファンタの平穏な日常 Blog  

Comments

kei

kei

初めまして!こちらのサイトを役立てさせて
いただいております。ありがとうございます。

こちらのサイトを見て無事lightboxを設置できたのですが
一点だけおかしい所があります。
画像の「NEXT」をクリックすると次の画像に変わるはずが
また同じ画像になってしまいます;もう一度押すと
次の画像へ変わります。
どうやら2枚ずつ登録(?)されているような感じです。

cssフォルダ、jsフォルダ、imagesフォルダには
一切手を加えていない為、自分のhtmlの記述が
原因なのだと思うのですが
どうやって解決すればいいかわかりません;

ちなみにhtml部分はこんな感じです。








グリッド的に横に画像を並べています。
どうかお教え頂けないでしょうか?

2011年08月29日 01:12

PON

PON

初めまして、
助言をいただきたいのですが、ものすごく初心者です。
Lightboxで画像がでてきたときに、
背景の黒い部分が途中で切れてしまうのです。
画像を縦に配列した場合は背景が切れないのですが、
横に配列した場合、背景が切れてしまい悩んでいます。
(背景が画面左寄りになり、右側が切れてしまいます。)
もし解決方法がございましたら
教えていただけるとうれしく思います。
どうぞよろしくお願いします。

2011年08月22日 10:48

MIYA

MIYA

みろくさん。

キャプション内でセンター寄せ(3行分)と左寄せ(複数行)の二種類を使い分けの件なんですが、色々試してみたのですが、解決策は見つからなかったです…

力になれなくてすみません。。。

2011年03月31日 01:28

みろく

みろく

MIYAさん
とても親切なHPを作っていただきありがとうございます!!
Lightboxを導入し、キャプションを改行させる方法を行いました。
そこまでは無事に出来たのですが、
キャプション内でセンター寄せ(3行分)と左寄せ(複数行)の二種類を使い分けたいのですが、そのようなことは可能でしょうか。
name属性に入れてセンター寄せを考えたのですが、(title属性には入れたくなかったので)
改行を含めたものでセンター寄せにしたかったので行き詰ってしまいました。
何か御助言がありましたらよろしくお願いいたします。

2011年03月31日 01:00

tsuruda

tsuruda

勉強になります。
ありがとうございました。

2011年01月22日 09:10

maku3615

maku3615

はじめまして。
とてもわかりやすいページで勉強になります。
lightboxの下にタイトルとその説明を入れたいと思い、検索していたらこのサイトに出会いました。

ところで疑問なのですが、DLしたJSフォルダに5個のjsファイルがありますが、「lightbox.js」以外のファイルも必要なのでしょうか?
ご多忙とは思いますが、どうぞよろしくお願いいたします。

2010年12月09日 16:12

MAME

MAME

初心者なのでここのサイトには大変お世話になっております。
ありがとうございます。

chailさんと同様にキャプションを改行させる方法があったらいいなと思っていたところ掲載されていたので非常に助かりました。
ただ、NEXTとPREVがありグループ分け(?)する場合「 lightbox[a] 」といったように記述すると思うのですがこの場合だと動作しないようなのです。
なんとかならないでしょうか?

ご教授よろしくお願いします。

2010年12月03日 18:17

MIYA

MIYA

shinohara design officeさん。

ウィンドウの中央とは上下中央って事でしょうか?
それであれば LightBox ではそもそも最上部から計測となっている為ほぼ不可能となります。

その場合はLightBox の用な他のプラグインを使用した方が良いかと思います。

また、 LightBox はクリック後の画像のサイズをそのまま表示しますので、そちらの画像をリサイズする事によっても解決は出来るかと思います。

2010年12月02日 17:44

shinohara

shinohara

Lightbox導入しました。
ここのサイトには大変お世話になりました。
ありがとうございました。

現状、拡大画像の位置がステータスバーにくっついてしまっていますが、できればウィンドウの中央に表示したいと思っています。

何か良い方法はありますでしょうか?

2010年11月30日 13:30

MIYA

MIYA

chailさん

記事の方に改行させる方法を追記いたしましたの参考にして下さい!

2010年11月09日 14:28

chail

chail

はじめまして、Lightboxでの表示画像に説明文(20行程度、改行ありのもの)を載せようとしてうまくいかず困っています。
現在は<a>タグの「title=""」に説明文を載せていますが、onマウスで改行<br />が見えてしまいます。
うまく説明文をのせたいのですがどうしたらよいでしょうか??

2010年11月08日 14:00

pepa

pepa

ayaさん

お返事遅くなってすみません!
ありがとうございます。
おかげで解決しました。
助かりました!

2010年10月06日 23:08

困った困った

困った困った

初めまして。

Lightboxを使ってみたくてこちらのサイトにお邪魔しました。
いろんなサイトを読んでも上手くいかず、こちらのサイトのソースを使って、画像を表示することができました。
ありがとうございました!!

しかし・・・画像表示ができて喜んでいたのもつかの間、サムネイル画像の位置を指定したくてもできず、さっそくつまづいてしまいました(汗)
というかサムネイル画像にidをつけてcssを使ってボーダーの色を指定しようとしたり、位置を指定しようとしたり試してみるんですが、サムネイル画像に対してはcssがどうも働きません・・・
何か考えられる原因はありますでしょうか?

ご教授いただけるとありがたいです。
よろしくお願いします。

2010年09月26日 01:22

MIYA

MIYA

close のみでしたら、その画像がサーバーにあがっていないか。
close への画像のパスがあっているかどうかの見直しが必要になります。

?マークになっている部分を右クリックでアドレス(URL)が出るかと思うですが、そのパスがあっているか確認して下さい。

2010年09月17日 18:08

aya

aya

>pepaさん

私もclosexの画像だけが?マークになっていたのですが、
対処がわかりました♪

「lightbox.js」内の50行目にある、「fileBottomNavCloseImage」を写真があるhtmlページから見たパスを張ってあげればOkです。

----------------例---------------------

(元)
fileBottomNavCloseImage: /images/closelabel.gif',

(修正)
fileBottomNavCloseImage: '../../js/lightbox/images/closelabel.gif',
(↑2階層上にあるjsというフォルダのlightboxというフォルダ内に入ってる場合のパス。)

------------------------------------------

今後の参考になれば幸いです。

2010年09月16日 11:55

pepa

pepa

初めまして。
とてもわかりやすい説明で、これならスーパー初心者の私にも
できる!と思っていたら、なぜかclosexの画像だけが?マークに
なっています。他は問題なく動いているようです。

何かチェックポイント等ありましたら教えてください。
よろしくお願いします。m(__)m

2010年09月03日 00:27

DAI

DAI

初めまして!
Jquery関係でいつもお世話になっております!

lightboxの応用についてお伺いしたいのですがよろしくお願いします。

当方、ブログのエントリーにlightboxを使用しています。クリック時に拡大し、アンカーの「title」がキャプションとして表示されますが、これを「title」では無く「alt」に変更する事はできないでしょうか…
Jqueryでimgのaltを取り出し、attrでaのtitleに書き出してもダメでした。

なんとかならないでしょうか…
よろしくお願いします!

2010年08月06日 03:31

nonno

nonno

初めての投稿です。
Lightbox 2.0では表示速度や背景の不透明度等を設定することができると何かに書いてありましたが本当にできるでしょうか。もしできるならば、その設定方法をご教授頂ければ幸いです。
よろしくお願いいたします。

2010年07月01日 10:40

tama

tama

はじめましてまったくの初心者です。
質問させて頂きます。
キャプションの文字サイズを変更したいのですが、
どうしてもできません。
CSS内の具体的な変更・追加する方法を記載していただけないどうしょうか?
過去ログ見たんですがだめでした。
出来ればデフォルトの倍ぐらいのフォントサイズにしたいです。
よろしくお願い申し上げます。

2010年05月30日 08:53

RIO

RIO

すみません・・・。先日、質問の問い合わせを投稿いたしましたが、こちら自己解決いたしました。

原因はグループ名でした。

画像を表示させるHTML側のページにて、rel="lightbox[]"の[]内に、自分でグループ名を作成する必要があったみたいです・・・。

以下のようなタグをHTML側に記入することで、無事に next とprevious ボタンが表示されました。

本当にお手数をお掛けいたしました。m(_ _)m

2010年05月23日 15:21

RIO

RIO

はじめて質問を投稿させて頂きます。

本日、新しい「Lightbox2.04」をダウンロードして、サイト上の写真2枚に組み込みんでみたのですが、ローカル&サーバーともに「next」と「back」のボタンだけが表示されませんでした。

自分で検索して原因を調べてみたのですが、lightbox.cssに記されているこれらの「next」と「back」の画像ファイルへのパスが間違っているわけでもなく、この2つの画像ファイルの置くフォルダも変えたのですが、名前もデフォルトと同じ「images」にしており、cssフォルダと同じ階層にこの「images」フォルダを配置しているので、これが原因ではなさそうです。

ちなみに、私がダウンロードしたlightbox.cssでは、「next」と「back」ボタン表示に関して、以下のようなタグが初期設定されております。(※13~17行目)

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

こちら、Lightboxが新しいバージョンで、写真が2枚だけだから、「next」と「back」のボタン画像は自動的に表示されていない・・・という仕組みになっているのでしょうか?

お手数をお掛け致しますが何卒ご確認&ご助言頂きますようお願い申し上げます。

2010年05月20日 23:08

V

V

MIYA様
初めまして。ライトボックス超初心者のため、教えていただきたいです。
IE8で、リンク枠の点線が一瞬現れる件と画像が上側によってしまいます。(ダウンロードしたままのCSSでも同様)以前同様のコメントがあったようですが解決のしかたがわからなかったもので。

2010年05月19日 18:13

corgi

corgi

すみません。
自己解決しました。

あー、穴があったら入りたい。
何かの修正の際のミスでした。
が・・・

ご迷惑、お手数をおかけしました。
申し訳御座いませんでした。

2010年05月19日 12:43

Pon太郎

Pon太郎

MIYA様
はじめまして!

「LightBoxのカスタマイズ方法」
参考にさせて頂いてます!!
初心者の私にも分かりやすく、設置が出来ました!!
感謝しています。
ところで、1点だけお聞きしたいのですが…
1番最初にあるLightbox JS v2.0の使い方
変更後(Lightbox使用)のHTMLソース
で例を挙げたいのですが…


とすると、画像にマウスを当てた時にサムネイル画像の
代替でなく、文章が表示されてしまいます。

サムネイル画像の代替が上手く表示するには、
どうしたら良いでしょうか?

ど素人な質問の仕方で分かりにくいと思いますが
よろしくお願い致します。

2010年05月14日 19:23

corgi

corgi

はじめまして。

Lightbox初心者です。サイト制作でLightboxを
取り入れたのですが、Firefox(3.6)で検証した
ところ、例えば3枚しか画像を載せていないのに
「Image 1 of 9」と表示されてしまいます。実際、
3枚ずつ表示されます。IEでは大丈夫でした。

ですが、IEの場合は、画像の下に設置したナビに
影響がでまして、ナビのリンクをクリックすると
画像が表示されてしまいます(苦笑)

といった事象がおきましたので、何か解決方法を
ご存知ではないでしょうか?
私の記述がおかしいのかもしれませんが、
行き詰ってしまったので何か手がかりでも
と思いまして・・・。
ご教授いただければ幸いです。

2010年05月14日 16:08

どんたこす

どんたこす

初めまして。
1ウェブページ上に約50枚ほどの画像をLIGHTBOX化しました。
画像の容量は一枚当たり平均300KB前後なんですが
ページが微妙に重く、一枚開くNEXTで違う画像を開くと微妙に重くなってしまいます。
スムーズに開く、軽くなる方法ご存知でしょうか?

2010年05月09日 16:40

MIYA

MIYA

Lさん。

win で表示位置が違うっていうのは何も変更していないダウンロードしてきた状態の LightBox になるんでしょうか?

ちなみにDOCTYPE宣言によって表示位置が変わるって事はあるので、そのこはどうなっているんでしょうか?

2010年04月26日 00:18

MIYA

MIYA

kobe12さん。

わざわざコメントを頂きありがとうございます!
こちらかこそ為になれるような情報をかけるように頑張りたいと思います!

2010年04月26日 00:15

MIYA

MIYA

machanさん。

忙しい為返事遅くなってすみません…
自己解決できてよかったです。

力になれずにすみませんでした><

2010年04月26日 00:13

MIYA

MIYA

マチルダさん。

それは LightBox の使用になってしまいますね…
極力ブラウザを超えないくらいの画像に抑える他ないと思います…

力になれずにすみません。。。

2010年04月26日 00:10

L

L

macでは大丈夫ですが、winで見ると「拡大表示時の位置を変更する 1」のように上に表示されます。js/cssはいじってません。
なぜでしょう?同じ位置にしたいのですが...

2010年04月19日 17:25

kobe12

kobe12

MIYA様

Lightboxで、
「複数の写真グループを作成する」
情報を探しておりました。

>ちなみにrel内の名前は任意で大丈夫です。

貴重な情報ありがとうございます。
どうしてもお礼を投稿したくなりました。
ブックマークします。
これからもよろしくお願いします。

2010年04月19日 16:39

machan

machan

点線のリンク枠が一瞬現れる件は、

# 以下を ~ 内に追加。
script type="text/javascript">

# タグを変更。


のあと、キャッシュを掃除したら解決しました。
---------------------------------------------
拡大画像を少し下にずらす件は、

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 2) + 100;

で、解決しました。
---------------------------------------------
ありがとうございました。またよろしくお願いします。

2010年04月16日 09:50

machan

machan

会社のパソコン(XP)では、点線のリンク枠が表示され
なくなりました。自宅のパソコン(Vista)では表示さ
れます。瞬間的なことなので良しとします。
(どちらも、IE8です。)

厚かましついでに、もう一つ質問させていただきます。
satoeさんのご質問に対するMIYAさんのご回答ですが、
--------------------------------------------
LightBoxの表示位置の変更する点なんですが
lightbox.jsの231行目あたりある
var lightboxTop = arrayPageScroll[1] +
(document.viewport.getHeight() / 10);
こちらの部分の最後の数字「10」となっている部分を
変更する事で位置を変えれますよ!
ちなみに数字が小さい程下に移動します。
satoeさんが求めいるのは「5」くらいではないのか?
と思っております。
--------------------------------------------
とありますが、私も「5」に変更したのですが、一番上に
くっついて離れません。
ほかにも変更が必要な箇所があるでしょうか。

2010年04月14日 15:12

machan

machan

解決したと思ったのですが、ダメでした。
解決策がありましたら、よろしくお願いします。

2010年04月13日 22:52

machan

machan

すみません、自己解決しました。
またよろしくお願いします。

2010年04月13日 21:46

machan

machan

初めて質問させていただきます。
Lightbox2.04で、NEXTやPREVをクリックしたときに、
瞬間的に点線のリンク枠が現れるのですが、この枠線を
表示しないようにする方法はあるでしょうか。
ここのDEMOでは表示されませんね。
WindowsXPで、IE8を使っています。

2010年04月13日 19:09

マチルダ

マチルダ

IEでのみですが、画像がブラウザをオーバーしてしまう場合にのみ、スクロール、もしくはブラウザ拡大したときに画像がはみ出していた部分の背景色が真っ白になっています。この場合どういう対策をとればよろしいのでしょうか?

ちなみにダウンロードしたものをそのまま画像入れ替えで行っています

2010年04月13日 12:48

luci

luci

MIYAさま
お忙しい中お返事いただきありがとうございます。
教えていただいたようにcssを変えてみましたら、「Image 1 of 6」は消えたのですが、タイトルが出てきません。真っ白になってしまいました。

title=""だとタイトルが表示されます。
name=""はやはりだめでしょうか?

申し訳ありません。
再度教えてください。
どうぞよろしくお願いいたします。

2010年04月05日 13:23

MIYA

MIYA

梨奈さん。はじめまして!

上下中央なんですが、LightBox では出来ないと思います…

上下中央なら Lightbox風の違うスクリプトを使うしかないかと思います…


http://www.css-lecture.com/log/javascript/014.html
http://www.css-lecture.com/log/javascript/superbox.html
http://www.css-lecture.com/log/javascript/031.html

など探せば他にもいっぱいあるますので、そちらもご検討してみて下さい。

2010年04月02日 20:25

MIYA

MIYA

luciさん。

>グループにした場合「タイトル」と「Image 1 of 6」が同時に表示されないものでしょうか?
普通なら同時表示されるはずです…

ちなみに「Image 1 of 6」のみが必要ないのであれば、lightbox.css の24行目を下記の様に変更して下さい。
#imageData #numberDisplay{ display: none; }

これだけで luciさん問題は解決出来そうな気がしますので試してみて下さい。

2010年04月02日 20:20

梨奈

梨奈

はじめまして!
きゅうにすいません><

画像をクリックして拡大表示されるときに、
ページのど真ん中に表示したいんですが・・
方法あるでしょうか?
上下の真ん中です!

いきなりすいません><
もしよかったら教えてください!

2010年04月02日 16:36

黄生姜

黄生姜

MIYAさん

netscape 無視しようかと思ったのですが
良かったです。
ありがとうございます☆

2010年04月02日 13:19

luci

luci

Lightboxについていろいろ探しているうちにMIYAさんのHPにめぐり会いました。
とってもわかりやすく、こういう場合は…ああいう場合は…と、
出てくる質問に的確に答えてくださっていて、とても助かります。

さて、グループにした場合「タイトル」と「Image 1 of 6」が同時に表示されないものでしょうか?
いえ、正直言うと、「Image 1 of 6」は必要なく、タイトルだけ表示させたいのです。

自分は「title」ではなく「name」を使っているせいなのか、コメントのなかにあった【「Image 1 of 6」を非表示にする】を実行すると「タイトル」までなくなってしまいます。

ちなみに「name」にした訳は、サムネイルにマウスオーバーすると、タイトルが表示されてしまう(altのように)ことを避けたかったのです。

なにか方法はありますでしょうか?
お忙しいところ申し訳ございません…教えてください。
どうぞよろしくお願いいたします。

2010年04月01日 17:36

MIYA

MIYA

黄生姜さん。

たぶんですが、netscape は未対応だと思います…
でも今は netscape の数はもの凄く少なく気にする必要はないと思いますよ。

仕事でもここ最近では netscape をチェックした事はないですし…

2010年03月28日 19:09

黄生姜

黄生姜

はじめまして。
lightbox初心者となります。よろしくお願いします。
netscapeを除き、他のブラウザでは
上手く表示されるのですが、netscapeのみ
サムネイルをクリックするとブラウザが真っ黒となり
表示されません。
netscapeは未対応ということはあるのでしょうか。

2010年03月28日 15:59

MIYA

MIYA

kongaraさん。

正直文面だけでは何とも言えない状態です…
もしよろしければ、メールでもそのURLを教えて頂ければ、時間を見つけて一度見てみたいとは思います。

念の為ですが、その画像のパス(URL)を直打ちした際表示されるかどうか。
画像の名前を半角英数かどうか。違い場合は半角英数にして試してみて下さい!

2010年03月23日 19:19

kongara

kongara

miya様

お世話になります。
連絡が遅くなり申し訳ありません。

「masano様が解決した方法」は、本ページを参考にさせていただき試したのですが、結果は変わりませんでした。

また、教えていただいた「jpeg じゃなく jpg」についてですが、現状が「jpg」でしたので、「jpeg」に変換して試してみましたが結果は、変わらずでした。
(前回送った情報に誤りがありすませんでした。[jpeg->jpg])

「masano様が解決した方法」
masano様のコメントより
photoshopで画像のトリミングをやりなおしてみたところ、無事IEでも表示されるようになりました。

2010年03月23日 11:29

maki64

maki64

MIYA様

 いろいろすみませんでした。
あとは自分なりに勉強して頑張ってみます。
 また何かありましたらお願いします。(^_^)v

2010年03月19日 12:46

MIYA

MIYA

maki64さん。

以前教えた記述だと指定した要素全体を透過にしちゃうんで解決作としては背景画像を透過PNGを使うか、何も指定しないかだと思います。

DOCTYPE宣言といい、そこらへんの話になるとHTML CSS をきちんと勉強しないと駄目ですね><

2010年03月19日 10:54

maki64

maki64

MIYA様

ありがとうございます。
DOCTYPE宣言、理解しました。
私の記述はいろいろ混ざっているようで、HTMLチェッカーなるもので、チェックしたら分かりました。

写真のコメントですが、背景色を半透明にしたら文字色も薄くなったんですが、この解決はないでしょうか?

宜しくお願いします。(自分なりにいろいろ記述していますが、今ひとつうまくいきません。もっとHTMLやcssを勉強しないとダメですね。)

2010年03月18日 12:11

MIYA

MIYA

kongaraさん。

masanoさんの件、調べようと思ったらもう解決していたみたいなので、見ていないのですが、masanoさんが解決した方法では駄目な感じですか?

ちなみに jpeg じゃなく jpg ならどうなりますか?

2010年03月17日 11:00

MIYA

MIYA

maki64さん。

DOCTYPE宣言がブラウザどうこうじゃなく。自分でこの形式で記述しますよ!って言う宣言です。
それをブラウザ側が認識するって感じで受け止めてくれたら分かりやすいかと思います。

表示エリアをピクセルでは指定出来ないと思います…

2010年03月17日 10:51

kongara

kongara

MIYA様

はじめまして、konagaraと申します。
2010年03月11日にmasano様が投稿されている内容と同じ症状に陥っています。

写真のサイズを変えてみたりしたのですが、症状は、かわりませんでした。

お力をお貸し願えないでしょうか。

masano様の言葉をお借りして
>制作したサイトにLightbox2.04を設置したのですが、IEでだけ一部画像が表示されません。表示されないものに関しては、gif画像(くるくる回るもの)が表示されたあとjpeg画像が出てこない状況です。

宜しくお願いいたします。

2010年03月16日 19:48

maki64

maki64

MIYA様

 返事が来る前に自分でいろいろ変更してみました。
文字の上部が切れる問題と、表示枠がスクロール状態になる問題は解決できました。
(適正かどうかはわかりませんが。)

#imageDataContainerの設定に

overflow: auto から overflow: visibleに変更(スクロール表示ではなく、全体が表示されるようになりました。IE7の場合 Firefoxでははみ出し表示になる)

#imageData #captionにline-height: 1.4em;を追加したところ、文字の上部の切れが解消し、行間が少し広がりました。

本来なら、表示エリアをピクセルで指定したいところです。

正しい方法が分かりましたらご教示下さい。m(__)m

2010年03月14日 21:43

maki64

maki64

MIYA様

お忙しいところ見ていただいてありがとうございます。

lightbox.cssの#imageDataContainerの設定に
opacity: 0.7;
filter: alpha(opacity=70);
で、追加したところ、タイトル枠もほぼ、背景色同様に半透明になりました。
が、opacity: 0.7;は記述しなくても同じでしたが、これはどちらを使ってももよい。と言う事だったんでしょうか?(opacity=40で設定しました。(^^ゞ)

が、これを実行すると、書いてあるテキスト文字も薄くなってしまいます。
理想としては文字は薄くなって欲しくなかったんですが、背景なしで、文字だけ記入できたらいいのですが、どうでしょうか?

あと、文字を大きくしたので、テキスト枠も写真の横幅ではなく、一定のサイズにしたいのですが。現在、文字上部も少し切れて表示されます。

もう1点、最初からの質問です。

「DOCTYPE宣言がない」というご指摘ですが、HTML宣言の前に、DOCTYPE宣言を記述することは出来ますが、すみません。調べたんですが、HTMLのバージョンの事がよくわかりません。

HTMLのバージョンによって推奨されない属性があったりという事は理解しましたが、自分のバージョンがわかりません。どうやって調べるのでしょうか?
私はネットでHTMLタグを調べてHPを作っていますが、バージョンなどわかりません。

IE7を使っていますが、HTMLバージョンはブラウザによるのでしょうか?(作る側ではなく、見る側によるということでしょうか)

なかなか解決にいたりませんが、もう少しお付き合い下さい。宜しくお願いします。

2010年03月14日 20:47

MIYA

MIYA

maki64さん。

ちゃんと見させて頂いたのですが、firefox では指定通りに表示されているようなので、おそらく原因は HTML を指定する際に、「DOCTYPE宣言がない」事が原因だと思われます。それで解釈の違いが起こってるものだと思います。

ソース一番上の html となっている部分を変更出来ればこの問題は直ぐに解決は出来ると思います。

透過させるとするなら

記述してくれる CSS の部分に
opacity: 0.7;
filter: alpha(opacity=70);
と記載すると透過してくれると思いますよ。

2010年03月14日 15:48

masano

masano

先日、質問させていただいた件ですが、解決することが出来ました。
photoshopで画像のトリミングをやりなおしてみたところ、無事IEでも表示されるようになりました。

失礼しました。

2010年03月13日 20:37

maki64

maki64

MIYA様

フォントサイズ、色、背景色とも変更できました。
ありがとうございます。

lightbox.jsの231行目
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 5);
にしてみましたが、やはり同じ結果でした。

HPはiswebライトを使っています。

上に広告バナーが入るのが何か原因でしょうか?
1度HPを見ていただけないでしょうか?

もし、だめだったら、今、画像の周囲の白い枠を消した状態にしているので、その白い枠の分だけ上から下がって表示されているので、まあ、我慢しようかなと思っています。

また、もう1点なんですが、フォントサイズをsmallに設定したのですが、やはり、小さい写真の場合はタイトル枠の横幅が足らず、2~3行表示となり、スクロールバーが付いたタイトル枠になります。また、文字上部も少しきれています。

このタイトル枠の大きさと、背景のように透過性にしたいのですが、
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #739F5F; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
どこを変更したらよいでしょうか?

最後のauto; width: 100%は写真幅の100%と言う意味ですね。

lightbox.jsは、添付メールを送っていただけましたら、それをコピーして貼ってみようかと思いますがどうでしょうか?

2010年03月12日 13:24

masano

masano

MIYA様
はじめましてmasanoと申します。
いつもこちらのサイトで勉強させていただいております。
今回どうしても解決出来ない問題があり、どうかお力をお借りしたくコメントさせていただいております。
制作したサイトにLightbox2.04を設置したのですが、IEでだけ一部画像が表示されません。表示されないものに関しては、gif画像(くるくる回るもの)が表示されたあとjpeg画像が出てこない状況です。何か対応方法はありますでしょうか。
長々と失礼しました。
どうぞよろしくお願いします。

2010年03月11日 18:51

MIYA

MIYA

maki64さん。

フォントサイズも種類と同じく #imageData #caption に記述すれば問題ないはずですよ。

5 なら縦軸の中央近辺に来ますね。解凍後、231行目の変更せずにデフォルトの状態ではどのようになるんですか?

デフォルトは 10 の状態で 上部からやや下に表示されるようになってます。
それすらおかしいようでしたら、maki64さんが導入してる他のものに原因があるはずですので…

2010年03月11日 10:43

maki64

maki64

miya様、早速回答ありがとうございます。
フォントの種類は変更できました。
フォントのサイズはどうでしょうか?
写真横サイズより文字数が長くなったり、フォントを大きくしたために写真サイズより長くなるようなことになったら表示できないのでしょうか?
サイズが少し小さいんで、もう少し大きくしたいです。

あと、ダウンロードしなおして、解凍、231行目の変更、再アップロードしましたが、同じ状態です。
常にタブの中央最上部から写真が開きます。

ソースがどこかおかしいでしょうか?
miya様のPCでは5の位置辺りから画像が表示されているのでしょうか?

宜しくお願いします。

2010年03月10日 16:50

MIYA

MIYA

maki64さん。ご質問の件なんですがまずはフォントの変更については lightbox.css の
#imageData #caption
となっている部分に font-family で設定しておくと変更は出来ます。

後画像の表示位置についてなんですが、自分の方で検証してみたところ数値小さくすれば、やはり下に表示されてます… px 単位の調整は出来ないのです。

後今あるファイルの一式をダウンロードしないして検証してみてくれないでしょうか?

違う部分で何か起こっているかもしれませんので…

2010年03月10日 00:44

maki64

maki64

すみません、先ほどの質問の追加です。
私のHPは画面サイズ1024*768でIe7で最大化表示した時、スクロールバーが出るのですが、先ほど気付いたんですが、スクロールバーが下に行った状態(HPの最下段)で画像表示させると、上に余白が出来ています。が、HPの上段で画像表示させると、上いっぱいに表示されるようです。

いつも決まった位置(上から何ピクセルとか)で表示させることは可能でしょうか?

もう1点、写真タイトルのフォントは変更可能でしょうか?

たびたびすみませんが、宜しくお願いします。

2010年03月09日 00:13

maki64

maki64

miya様 はじめまして。

ホームページで画像を表示させるのに、ライトボックスを初めて使いました。

画像が上いっぱいに表示されるので探していたらこちらのページを見つけました。

早速ですが、satoeさん、2009年08月02日 17:55の記事と回答を参考にlightbox.jsの231行目
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);

を5にしても、1にしても一番上から表示される状態が改善されません。

私の場合、左右は中央でいいので、lightbox.cssはそのままでいいと思うのですが、ご教授お願いできますか?

lightbox2.04です。ページは
http://moku-makimaki.hp.infoseek.co.jp/moku.html
です。
宜しくお願いします。

2010年03月08日 23:11

koike

koike

MIYA様

お疲れ様です。
先日は大変あつかましいお願いにもかかわらず
ご親切にご教授くださいまして、ありがとうございました。

お陰様で長い間悩み続けていた問題が、すべてクリアになりました。
本当にお世話になりました。

今後もこちらにお邪魔させていただき
勉強させていただこうと思います。

失礼します。

2010年03月06日 14:38

koike

koike

MIYA様
この度はお忙しいところ、あつかましいお願いをしまして
本当に申し訳ありませんでした。
アドバイス頂きましたタグを利用させて頂き修復してみます。
結果は後日、報告させていただきます。

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

2010年03月03日 12:03

MIYA

MIYA

koikeさん。URL先のサイトを拝見させて頂きましたが、html の部分を img タグの部分をリンクタグ(a)二つ使っている事が原因だと思います。

見た目上は一枚。
lightbox 使用後複数。

って場合であれば


<span><a href="001b.jpg"rel="lightbox[short_0910]"><img src="001.jpg" alt="" /></a></span>
<span style="display:none"><a href="002b.jpg"rel="lightbox[short_0910]"><img src="002.jpg" alt="" /></a></span>


上記ソースのように表示したくない画像(002.jpgの部分)に display:none を使うのが一番早い問題解決だと思います。

2010年03月03日 10:56

MIYA

MIYA

koikeさんはじめまして。

どういう現象が起きてるのかは把握は出来ましたが今までに聞いた事はないですね…
ちなみに読み込まれてるソース(html)の部分の順番の方に問題ってなさそうですか?

状況だけ聞いて直ぐに思いつくのはそこしかりません…

2010年03月02日 16:11

koike

koike

MIYA様
はじめましてkoikeと申します。
LightBoxの設置にあたり、大変わかりやすいご説明で
とても参考になりました。ありがとうございます。

お手数ですが、1点だけアドバイスをお願いいたします。
例えば5枚の写真をグループ化して表示させる場合、
サムネールをクリックするとはじめの画像はImage 1 of 5と
表示され、画像上ではnextと表示されるのが正常だと思います。
しかし、なぜかはじめの画像がImage 5 of 5と表示されてしまい
尚かつ、画像上ではPLEVが表示されてしまいます。
要するに一番最後の写真が表示された状態なのです。
どこを修正すれば正常に写真1から表示されるのかを
ご教授頂けないでしょうか。
お手数ですが、よろしくお願いいたします。

2010年03月02日 15:47

MIYA

MIYA

masashiさん。

どこかに記述してる font-size が効いてるじゃないですかね?おそらくですが…
もし分からないようなら lightbox.css の #imageData の部分に font-size を直接指定したら任意の大きさになってくれるはずですよ!

2010年02月14日 02:17

masashi

masashi

初めましてとてもわかりやすい説明でありがたく思います。
質問なんですがサイトにライトボックス導入したのですがtitleとimage○of○の文字が小さくなってしまって見にくいのです。
カスタマイズなど何もしてないのですが何が原因なのか分かりません。何か分かることありましたら教えてもらえませんか?

2010年02月09日 19:18

neneco

neneco

アドバイスありがとうございました。
自分のCSSをも何度か見直したところ、bodyごとtext-indentがかかっていたのがよくなかったみたいです。
素人の私にも優しく教えてくださってありがとうございました。ご報告までに。

2009年12月25日 03:14

MIYA

MIYA

クリック後と言ってもnenecoさんが記述している何かしらのCSSが効いてしまっている為ずれてると思われますので、その原因の箇所をコメントアウトなどをして、一つ。一つ。調べていくしか道はなさそうな気がします…面倒ですが。

position:absolute;やposition:fixed;を使ってるのであれば、そこら辺の要素が影響しているかもしれません><

2009年12月09日 12:24

neneco

neneco

お返事が遅くなってすみません。ダウンロードした画像できれいに表示できたんですが、自分の画像に置き換えて自分のサイトで開こうとすると、少し右下にずれて画像が表示されます。lightboxの画像でちゃんとできたということは自分のサイトのCSSがうまくいってないと思うのですが、TopとかLeftを0にするにも、ずれているのがリンク先の画像なので、CSSの直し方がよくわかりませんでした。

2009年12月08日 22:16

MIYA

MIYA

Yoheiさん。

Light Box をダウンロードしてきたファイルで確認しますと、そのような現象はおきないはずなんですが、そこはどうでしょうか?

そこに問題がなければ、Yoheiさんが記述しているCSSが何かしら影響を与えてるからだと思います。
具体的に言いますと、こちらの記事で紹介している感じです。
http://www.css-lecture.com/log/zakki/plugin-attention.html

影響を与えてそうな要素を一つ、一つコメントアウトなどをして検証していくしかないと思います><

2009年12月04日 17:26

Yohei

Yohei

ご教授お願い致します。
去年末にWEBの学校を卒業しましたが、わからない事があります。
Light Boxを使ったサイトを作ったのですが、
Firefoxでは問題ないのですが、IEではbackground-colorが途中までしか表示されません。
何かcssに書き足すことなどあるのでしょうか?

2009年12月04日 16:34

ariphoto

ariphoto

なるほど。そういう方法があるのですね。
丁寧にデモページまでお作りいただき感謝に堪えません。
いろいろやっても問題が解決しなかったので、教えていただいた方法でやってみて清々しい気持ちになりました。
この度はありがとうございました!

2009年11月30日 17:09

MIYA

MIYA

ariphotoさんのおっしゃってる通り title属性に記述している以上ブラウザ側の仕様になってしまいますね…

邪道ではありますが、title属性を使用せずに name属性を使ってならいちよ問題は解決出来ますので参考にして下さい。
http://www.css-lecture.com/template/2008/0924-1/index3.html

2009年11月29日 14:45

ariphoto

ariphoto

さっそくのご返答ありがとうございます!

表示されるツールチップなのですが、こちらで設定しているのではなく、ブラウザのディフォルトで表示されてしまうものです。
FireFox3.5.5とSafari4.0.4では同じように表示されてしまいます。

title属性に記述している以上仕方のないことなのでしょうか?

2009年11月29日 02:36

MIYA

MIYA

nenecoさん。ありがとうございます!

画像がずれてとは、クリック後の話でしょうか?ちなみにダウンロードしたファイルではずれる事はないですよね?nenecoさんのサイトに導入した際にずれるって事でよろしいでしょうか?

2009年11月29日 00:53

MIYA

MIYA

ariphotoさんはじめまして。

ツールチップだけを強制的に非表示にするなら、おそらくツールチップで使われてるJSをいろいろと変更しないと駄目だと思われます。

ツールチップ系でもtitle を使わないのもあるので、それを使えば問題は解決出来そうな気はしますが、どの様なツールチップを使ってるいるか分からないので、これ以上の事ははっきりとは分かりません…

2009年11月29日 00:50

neneco

neneco

初めまして。 とても勉強になるのでブックマークさせていただきました。
わたしも今日初めてlightboxをダウンロードしたんですが、画像がずれて表示されてうまくはまりません。どのような原因が考えられるでしょうか?

2009年11月28日 23:58

ariphoto

ariphoto

はじめまして。
現在ポートフォリオのページを作っていて、Lightboxを導入しようとあれこれ調べていたら、こちらのページにたどり着きました。
詳しい説明やデモのページ、大変役に立たせていただいております。

作成中のサイトですが、トップページにサムネイルをちりばめた様なデザインにしています。それぞれの画像にLightboxのリンクを記述しているのですが、マウスオーバーするたびにツールチップが表示され煩わしくなります。
タイトル属性を空に(title="")にするとLightbox上での説明もなくなってしまいます。
サムネイルに表示されるツールチップだけを強制的に非表示にする方法などはありますでしょうか?

よろしくお願いします。

2009年11月28日 01:03

KOPPA

KOPPA

すみません先程の件自己解決いたしました。
お手数おかけして申し訳ありません削除していただいて結構です。

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

2009年11月26日 15:34

MIYA

MIYA

グループ化にした際 next prev で移動するとnanaさんがおっしゃってる現象がおきますね…初めて知りました…いろいろ見てみたのですが、自分ではちょっと分かりそうになかったです…

お力になれなくてすみません><

2009年11月23日 22:22

nana

nana

画像をグループ化した場合に、一部の画像にタイトルを入れる場合はどうしたらいいのでしょうか?
<a href="image/1.jpg" rel="lightbox[gruop1]" title="写真1"><img src="image/1s.jpg"></a>とするとグループ内外の全部の画像に"写真1"と表示されてしまいます。全部の画像にタイトルを付けなければいけないのでしょうか?

2009年11月23日 14:31

MIYA

MIYA

tomiさんがおっしゃっている「NEXTとPREVがある場合は常に表示」なんですが「NEXTとPREVがある場合」とはLightBoxで表示する時にグループ化されている時の事を示します。

なので、リンク要素にrel="lightbox"など記述して頂ければグループ化されるので、グループ化したい要素に「rel="lightbox"」と記述をして下さい。

ちなみにrel内の名前は任意で大丈夫です。

2009年10月18日 16:35

tomi

tomi

久々の質問です。

追記7にある「NEXTとPREVがある場合は常に表示」
の記述にしたのですがNEXTとPREVは表示されませんでした

写真そのもののグループ化がされていないのかと思い「rel="lightbox[roadtrip]"」の記述に変更しました。
おわかりになる方、どうぞ宜しくお願い致します。

付属で上記の[roadtrip]以外の記述でもいいのでしょうか?例:group_1とか

2009年10月14日 18:01

komasan

komasan

まずは、大変ありがとうございました。ご教示のようにSCCを修正しましたら概ね考えていた通りに開いた時の位置が決まりました。今まではクリックしてほかのウインドウを開くくらいしかできませんでしたが、miyaさんとLIGHTBOXのおかげで少しはかっこいいホームページができたと自画自賛しております。今後とも世のため人のためは少々大げさですが私のような人間のために頑張ってください。

2009年09月21日 13:10

MIYA

MIYA

komasanさん。失礼しました。
komasanさんがおっしゃっていた方も修正しておきました。

ちなみに拡張子がjsになっているものは普通にメモ帳で開く事も出来ます。ちなみに自分は主に Dreamweaver を使っているのですが、ちょっとした変更などは秀丸を使っております。

lightbox.jsで右クリック→プログラムから開くで好きなエディタで開く事が出来ます。

2009年09月21日 12:41

komasan

komasan

休み明けでこのHPを見て返事を確認し感動しました。早速DEMOPAGEを見てみたのですが右上表示のDEMOは正常に表示されますが、次の左表示はクリックするとエラーになって真っ黒のままです。申し訳ありませんが再度ご教示ください。
それと話は変わりますが、LIGHTBOX.CSSのLISTはメモ帳でも、HPビルダーでも開いて編集可能ですが、LIGHTBOX.JSのLISTが開けません。JSを編集するのに最適なソフトを五ご紹介いただけませんでしょうか。

2009年09月21日 09:14

ねこ

ねこ

MIYA様
記事の方読まさせていただきました。
大変わかりやすく参考になりました。ありがとうございます。

>どちらにせよ、スクロールしなくてはならないサイズの画像はLightBoxで表示させるのは厳しいと思いますよ><

あ、そうなんですか;なんでだろう?クローズボタンの手間とデザインを考えLightBoxにしていたのですが…今回のはクライアントに渡してしまったので、次回から止めないとかな;助言ありがとうございました。

2009年09月18日 11:08

MIYA

MIYA

ねこさん。少しでも上に表示したいならねこさんが記述してくれている内ようの最後の数字を500とかにすると一番上に表示されます。

記事の方も追記しておきましたので参考にして下さい。

どちらにせよ、スクロールしなくてはならないサイズの画像はLightBoxで表示させるのは厳しいと思いますよ><

2009年09月17日 11:51

MIYA

MIYA

komasanさん。記事の方を追加しておきましたので参考にして下さい。

komasanさんの場合はlightbox.cssを変更するだけで大丈夫ですよ。

2009年09月17日 11:46

ねこ

ねこ

とても解りやすく見やすいサイトで助かっております。

スクロールしないといけないほど大きい画像を使用しているので、LightBoxの表示位置を少しでも上に変更できないものかと、探して居た所こちらのサイトにたどり着きました。

ここにも載ってないのかぁとガックリして居た所、コメント欄をみつけ、読んでみたら同じ質問されていた方が居て嬉しく思いました。が、読んで見ると

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);

数字が小さい程下に移動します。

10が最高なんですね。ガッカリ…でもずっと調べていたのでスッキリする事が出来ました。
感謝します。

2009年09月17日 02:57

komasan

komasan

先日はご回答ありがとうございました。さてLIGHtBOXを使って表示するときに表示位置をもう少し左寄りとか右寄りとかにしたいと思うときがありますが、DLしたままだとセンターのように思いますが、どこの部分を修正したら表示を変えあられるのかご教示ください。

2009年09月16日 14:05

MIYA

MIYA

komasanさん。サムネイルの件は了解致しました。

現状表示確認をしているのはホームページビルダー上で行っているって事でよろしいでしょうか?

もしそうならば、ホームページビルダー上ではなく、ブラウザ(IEやFirefoxなど)上で一度確認してみてくれませんか?

そしたら今おっしゃってる現象はおきないと思います。

2009年09月14日 11:57

komasan

komasan

お世話様です。画面の中央部分にサムネイルが横に5枚ほど並べまして、どれかをクリックしたらlightboxによりその元画像が表示されるように下のですがプレビューをみると拡大画像の上にサムネイルがかぶっています、という意味です。おっしゃるように手前に表示されるということになります。ソフトはホームページビルダーV8でみています。よろしくお願いします。

2009年09月14日 11:42

MIYA

MIYA

Komasanさん。

>サムネイルをクリックして画像が表示されるときにサムネイルが上にかぶってしまいます
と言うのはlightboxで拡大表示させた状態の時に、Webサイト上の他の画像が上にlightboxで拡大させた画像よりも手前に表示されるって事なんでしょうか?

2009年09月14日 10:45

Komasan

Komasan

お世話様です。LIGHTBOXありがたく使わせていただいています。ところサムネイルをクリックして画像が表示されるときにサムネイルが上にかぶってしまいます。同じページにある画像もかぶります。ただほかのページに文字からリンクしたところはそこにある画像はしたに隠れるのですが、なぜかよくわかりません、ご教授お願いします。

2009年09月14日 09:47

MIYA

MIYA

KYOKOありがとうございます!

>ウィンドウサイズに合わせてリサイズされるようには出来ないのでしょうか。
こちらlightboxはリサイズするような指定はしていないのでこれは不可能ですね…

もう一つの質問なんですが、lightboxはグループ化すれば、KYOKOさんがおっしゃっているように画像の半分が押せる使用にはなっているのですが…

こちら解釈が間違っていたらすみません><

2009年09月08日 18:49

KYOKO

KYOKO

すばらしいお助けサイトで感激しています!!

lightboxではウィンドウサイズに合わせてリサイズされるようには出来ないのでしょうか。
lightbox plusというのでは出来るようなのですが複数枚でスライドショーにしたときに、左右どちらか半分を押せばnext/prevができるほうがいいなぁと。(lightbox plusだと>マークのところを押さないと次に行かずに閉じてしまうよう…?)


ご助言などございましたらお教えいただけましたら幸いです!(>

2009年09月08日 17:46

MIYA

MIYA

Soulさん

返事が遅くなり申し訳ございませんでした><

CSSの「15%」部分を「95%」と変えてみたら直ったって事は、ダウンロードした状態のCSSの状態でLightBoxの表示がずれていたって事ですか?

とにかく問題が解決出来たみたいで結果オーライですがwダウンロードした状態で表示がずれているのは謎ですね…

2009年08月24日 11:59

Soul

Soul

はじめまして。
「PREV」「NEXT」を下の方に表示する方法で、CSSの「15%」部分を「95%」と変えてみたら、Safariだと画像が左寄りに表示されていた問題と、IEだと画像の白枠が表示されないという問題が一気に解決していてビックリしました!何でなんでしょ!?

いろいろ他を見て回っても解決できなかったのでとにかく嬉しいです。
ありがとうございました!

2009年08月20日 10:20

satoe

satoe

Miya様

さっそくのお返事ありがとうございます。

一晩経ったら改善されていました。
キャッシュの問題だったのでしょうか。

お騒がせして申し訳有りません。
ありがとうございました。

2009年08月06日 01:48

MIYA

MIYA

自分の環境化(Win XP)ではIE6 7 8どれも正常に動作しているんですよね…

試しに
body{ margin: 0; padding: 0; }
と指定している部分のスタイルを一度きった状態で検証してみてくれないでしょうか?

それでもし正常に動作するならそれ以降に指定されたCSSのどれかが悪さをしているって事になるので、原因を突き止めやすくなると思います。

2009年08月05日 23:43

satoe

satoe

度々すみません。

位置設定の問題はおかげさまで即解決しました。 
ありがとうございます。


firefox2 とsafari4をマックOSX10.4にて動作確認をしていましたが
WindowsXP の Internet Explorer7では
ブラウザ画面の一部が暗転しません。

http://www.huddletogether.com/projects/lightbox2/#support
にあるように
デフォルトマージンおよびパッディングを消去のち
body{ margin: 0; padding: 0; }
を使用しているCSSに表記しましたが改善されませんでした。
何か他に解決策は有りますでしょうか?
よろしくお願いします。

2009年08月05日 16:49

satoe

satoe

miya様

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

早速 試してみます。

Dreamweaver初級者なので 本当に助かります;

2009年08月05日 12:57

MIYA

MIYA

satoeさん

ご返答が遅くなりすみませんでした><

それにご褒めのお言葉凄くうれしいです^^
ありがとうございます。

それで問題のLightBoxの表示位置の変更する点なんですがlightbox.jsの231行目あたりある


var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);


こちらの部分の最後の数字「10」となっている部分を変更する事で位置を変えれますよ!
ちなみに数字が小さい程下に移動します。

satoeさんが求めいるのは「5」くらいではないのか?と思っております。

2009年08月05日 00:56

satoe

satoe

miya様 とても分かりやすいチュートリアルを伝授して頂きありがとうございます。

自身のサイトの上の方には 
ロゴがありますので出来ればロゴにかぶらない様に 表示したいのです。
ライトボックスの表示位置をもう少し下めに出したいのですが
可能でしょうか?

2009年08月02日 17:55

MIYA

MIYA

meronさん

画像を加工せずに、できる方法なんですがおそらくないと思います。

画像のリサイズくらいならまとめてやってくれるツールもありますし、サーバーに無駄な負荷もあたえないですし、サイトを表示される速度にも関わる事ですので、先にやっておいて良いと思いますよ。

2009年07月18日 23:09

meron

meron

回答有難う御座いました。

>クリックした後に表示される画像のサイズはアップした状態のサイズをそのまま表示していますので、画像を加工の段階で調整しておけば良いかと思います。


画像を加工せずに、できる方法はありませんか?

2009年07月16日 13:37

MIYA

MIYA

naoさん

記事の方を追記しておきましたので、それを参考にして下さい。

2009年07月16日 12:07

MIYA

MIYA

クリックした後に表示される画像のサイズはアップした状態のサイズをそのまま表示していますので、画像を加工の段階で調整しておけば良いかと思います。

2009年07月16日 11:32

meron

meron

lightboxについて一つわからないことがあります。
もしご存知でしたら教えて頂けますでしょうか。

サムネイル画像をクリックした後に表示される画像の
サイズ指定は、どこですれば良いのでしょうか?

2009年07月16日 10:57

nao

nao

lightboxが立ち上がった時に表記される
image 1 of 5の表記を非表示にしたいのと
「NEXT」「PREV」の表記を
オンマウスで出るのではなく
はじめから表記した状態にしたいのですが
どうすればいいのでしょうか

2009年07月15日 18:19

MIYA

MIYA

文字数の調整を「title=""」内で制御すれば問題ないと思いますが…

2009年07月06日 19:44

yama

yama

lightboxについてですが、「title=""」でくくられる内容の1行あたりに表示される文字数の調整は可能でしょうか。

2009年07月06日 12:15

tsutomu

tsutomu

早いレスポンスありがとうございます。

教えていただいたコードを追加したところ
クリッカブルマップでも使用できるようになりました。

本当にありがとうございます。

2009年06月24日 14:31

MIYA

MIYA

lightbox.js 194行目に下記ソースの用に追加してみて下さい。
event.stop();
if (!target.rel) target.rel=Element.readAttribute($(target), "rel");
this.start(target);

2009年06月24日 12:39

tsutomu

tsutomu

LightBox、大変便利で有効活用させて頂いてます。
ありがとうございます。

さて、この機能はクリッカブルマップでも使用できますでしょうか?出来ると非常に嬉しいです。

2009年06月24日 10:02

MIYA

MIYA

tomiさん。

タイトルのみの表示でしたら lightbox.css の一番下でも
#imageData #numberDisplay { display: none; }
を付けくわえて下さい。

2009年06月20日 08:59

tomi

tomi

MIYA様前回はご丁寧に有難う御座います。

またしての質問なんですが、タイトルはクリアしました。
そこでそのタイトルの文字の大きさ変更は可能なんでしょうか?
あとタイトル下部に表示されるImage1of11の表示はなくせますでしょうか?(タイトルのみの表示にしたいのです。)

宜しくお願い致します。

2009年06月19日 22:28

MIYA

MIYA

a要素にtitleを入れたら画像名が表示されます。


a href="image/image-1.jpg" rel="lightbox" title="ここがタイトルになります。"

2009年06月09日 00:53

tomi

tomi

写真を表示した時に写真の名前を変更は出来ないのでしょうか?お助け下さい。
現在はImage1of11などの表記になっていますこれを写真の名前に変えたいのです。

2009年06月08日 21:30

MIYA

MIYA

そちらに関しては出来ない事はないとは思いますが、スプリクト内をけっこう書きかけないといけないと為難しいと思います。

2009年05月26日 21:09

ライト兄弟

ライト兄弟

ご返答ありがとうございます。
解決できました。
CSSで変更をすればよかったのですね…

ちなみに、CLOSEボタンをライトボックス右上に、
Image □ of ○を中央下部に、その両サイドに
PLEVとNEXTのボタンを表示させる

ということも可能なのでしょうか??

勝手な質問ばかりで、申し訳ありません。

2009年05月26日 19:47

MIYA

MIYA

ライト兄弟さん

はじめまして^^
記事の方を追記しておきましてので、記事のソースを参考にしてみて下さい^^

2009年05月26日 18:51

ライト兄弟

ライト兄弟

初めまして。ライトボックス初心者のため、宜しければ助言をお願いします。

ライトボックスの上部左右に表示されるPLEVとNEXTのボタンをImage □ of ○とCLOSEボタンのすぐ上あたりに表示したいと考えています。

その場合どこに、どのような記述をすれば実現可能でしょうか?

2009年05月26日 12:59

MIYA

MIYA

自分はインラインフレームを殆ど使った事がないので少し分からないです…
予想としてはたぶん無理なような気もしますが…

お力になれなくてすみません。

2009年05月25日 07:35

悩める子羊

悩める子羊

インラインフレーム(ページB)にlightboxを組み込み
インラインフレームが組み込まれている
ページ(ページA)で、ページB内の画像をクリックし
ページAにlightboxを表示させることは可能ですか?

2009年05月24日 19:48

MIYA

MIYA

lightboxはpngを使っていませんが…

2009年04月22日 02:06

lightboxer

lightboxer

はじめまして、lightboxを透過png以外で使用するのは可能なのでしょうか?

2009年04月20日 09:59

MIYA

MIYA

閉じるもNEXTの画像が表示されないって事はおそらく原因としては、lightbox.cssの画像のパスがあっていない為だと思われます。

lightbox.cssに記述されているNEXTとかの画像のパスを見直してみて下さい。

2009年03月10日 16:22

kino

kino

閉じるもNEXT画像も表示されません・・・
表示されるほうの画像が大きいからでしょうか?

2009年03月10日 12:48

HAUR

HAUR

わかりました。
ありがとうございました。

2009年02月23日 01:42

MIYA

MIYA

Lightboxでは無理ですね…

HTMLを表示したいならFancyBoxやNyroModalやlightviewなど他にもまだまだありますが、そういうプラグインを使って下さい。

2009年02月22日 21:53

HARU

HARU

解決できました。
ありがとうございます。

LightboxでHTMLは、表示するのはやっぱり
無理ですね。

2009年02月22日 10:34

MIYA

MIYA

MT使ってもサイトの装飾はCSSでやっているので0pxに設定したら消せますよ!

2009年02月21日 20:26

HARU

HARU

早速ページにアップして頂いて、ありがとうございます。
説明不足でしで、すみません。

画像にLightboxリンクさせると青い枠を消したいのです
ドリームウィーバーでしたら・・0pxnにすれば消えるのですがMTでは、消す機能が無いのでCSSで設定できますか??

2009年02月20日 23:23

MIYA

MIYA

はじめまして^^

>画像リンクの時枠
が何処の事を指しているのかわからないのですが、Lightbox表示後の白い枠という認識でよろしいでしょうか?

それなら新たにデモページ付きで追加しておいたので参考にして下さい。

違ったならすみません…

2009年02月20日 12:48

HARU

HARU

初めまして!!
Lightboxで画像リンクの時枠を消したいのですが
cssで設定できますか?

枠の消し方が分かりません(涙)

2009年02月20日 10:54

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article