解決済み

Lightbox JS v2.0について

  • すぐに回答を!
  • 質問No.4317312
  • 閲覧数838
  • ありがとう数5
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 82% (65/79)

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

ベストアンサー率 56% (215/379)

ソース見てみました。

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;
}
お礼コメント
usaborin

お礼率 82% (65/79)

色々いじってみました!

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

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

ありがとうございました☆
投稿日時 - 2008-09-10 23:10:35
Be MORE 7・12 OK-チップでイイコトはじまる

その他の回答 (全1件)

  • 回答No.1

ベストアンサー率 56% (215/379)

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

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

お礼率 82% (65/79)

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

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
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
このQ&Aにこう思った!同じようなことあった!感想や体験を書こう
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ