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
ソース見てみました。
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)
おそらくページに当てられてる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
新着
注目ピックアップ