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ボタンを取り入れたいのですが、設定の詳細がわかりません…

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

回答No.2

tenderfeel · ベストアンサー

ソース見てみました。

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;
}

お礼

色々いじってみました！

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

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

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

回答No.1

tenderfeel

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

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

お礼

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

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つけてみたら如何でしょうか。
この点ももう少し詳しく教えていただけると嬉しいです…

なかなか難しいですね；