Lightbox JS v2.0について

解決済みの質問

Lightbox JS v2.0について

Lightbox JS v2.0について
lightbox v2.0(http://www.huddletogether.com/projects/lightbox2/)を、作成中のホームページに取り込んでみました。
(ブログではありません。)

なんとか表示はされるのですが、IE7とFirefoxで、表示のされ方が違うのです…
・IE7…フェードインで出てきた画像が、画面中央でなく、画面上にくっついている。
・Firefox…画像のコメントとCLOSEボタンの下に横スクロールが表示される

他のサイトさんでlightbox v2.0を使用しているところを、IE7とFirefoxの両方で見ても崩れてないんですけどね…
なぜなのでしょうか?(´ω`)

それと、http://www.fsiki.com/jet/css-xhtml/lightbox-js-v2.htmlさんで配布されているCLOSEボタンを取り入れたいのですが、設定の詳細がわかりません…

詳しい方いらっしゃいましたら、ぜひご指導ください!

投稿日時 - 2008-09-10 01:35:06

QNo.4317312

すぐに回答ほしいです

質問者が選んだベストアンサー

ソース見てみました。

fusikiさんが作成されたlightbox.jsは冒頭の設定の他に、116行目くらいにも
アンカータグを取得する範囲を指定する行があります。
var anchors = document.getElementById('main').getElementsByTagName('a');
おそらくここのIDをサイトにあわせて設定してないので
lightboxが起動しないんだと思われます

Lightbox2付属のサンプルHTML+fusikiさん作成のCSSでは崩れてないので
レイアウト崩壊は使用サイトのCSSに原因がありそうです。
サイトのCSS外した状態では確認されましたか?

>LightboxのCSSのセレクタの優先値上げる(#id→div#id等にする)か
>プロパティに!impotrantつけてみたら如何でしょうか。
これはLightboxのCSSを強化するというアドバイスですが
分からないならとりあえず全部にimportant付けてみたらどうでしょう。
数打てば当たるかもしれません(笑)

こんな感じで▼

#lightbox {
position: absolute !important;
top: 40px !important;
left: 0 !important;
width: 100% !important;
z-index: 100 !important;
text-align: center !important;
line-height: 0 !important;
}

投稿日時 - 2008-09-10 17:22:12

お礼

色々いじってみました!

マウスオーバーの件は、cssだけ配布されてるものに変えたらできました!
(jsは変更しないでみたらできました!)
IE7で画面上にくっついてしまう件も、importantで解決できましたー!

相談する場がなく、あちこちで相談してもなかなか回答してもらえず…
ホントにtenderfeelさんのおかげです!

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

投稿日時 - 2008-09-10 23:10:35

0人が「このQ&Aが役に立った」と投票しています

回答(2

ANo.1

おそらくページに当てられてるCSSが影響してるんじゃないかと思います。
LightboxのCSSのセレクタの優先値上げる(#id→div#id等にする)か
プロパティに!impotrantつけてみたら如何でしょうか。
スクロールはoverflow:hiddenで消せると思います。

ボタンは配布されてるCSSでは適用されてるようですが
Closeボタンだけってことでしょうか?
画像をcloseだけにカットしてCSSのbackground-positionをサイズに合わせて変更すればやれると思いますよ。

投稿日時 - 2008-09-10 12:09:46

お礼

回答ありがとうございます!
なかなか質問する場がなく、困っていました。。

cssもLightbox.jsもいじってないものをサーバーにあげてみたりしてるのですが…どうにもうまくいきません。。スクロールバーはoverflow:hiddenで消えました!

ボタンなんですが、マウスオーバーにしたいんですけど、ならないのです…。​http://www.fsiki.com/jet/css-xhtml/lightbox-js-v2.html​さんで配布されているcssとLightbox.jsをマルッと貼り付けてみたりしたのですが、フェードインが適用されず、ただ画像が表示されるリンクになるのです…。

>LightboxのCSSのセレクタの優先値上げる(#id→div#id等にする)か
>プロパティに!impotrantつけてみたら如何でしょうか。
この点ももう少し詳しく教えていただけると嬉しいです…

なかなか難しいですね;

投稿日時 - 2008-09-10 15:46:18

新着

あなたの愛車は今いくら?

愛車無料査定Q&A特集

ニキビケアQ&A特集

スッピンでも輝くモテ美肌に。

教えて!みんなの婚活Q&A特集

みんなの婚活体験談、秘訣がいっぱい!

お部屋探しはCHINTAI

マチから探せる新しいお部屋探し!

注目ピックアップ

OKちゃんねる

OKWaveからみなさんに質問!

OKWave2009年ランキング

話題のQ&Aをランキングでご紹介!

スタッフブログ

知って得する!お得な情報をお届け!