« 2009年9月 | トップページ | 2010年4月 »

2009年10月

jQuery Lightboxで、PREV/NEXTボタンを常に表示

通常のLightboxのPREV/NEXTボタンを常に表示させるとすると、CSSでhover部分を修正すればいいので簡単です。

しかし、jQuery LightboxはCSSにhoverの記述がありませんでした。
これはjsをいじるしかないのかな・・・と思っていましたが、簡単に表示させる方法を見つけました。

27、8行目あたりの、以下の部分をfalseからtrueに変更します。

// Configuration related to navigation
fixedNavigation:        true,        // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

これでPREV/NEXTボタンが常に表示されるようになりました。

==================================

こちらを参考にさせていただきました。

jQuery lightBoxで、PREV/NEXTボタンを常に表示する。

OperaでのLightbox 2のズレ

先日いつものようにLightbox2を導入していたのですが、Opera9でLightboxのウインドウが下にずれて表示されることが判明しました。知らなかった・・・

この現象を回避するため、lightbox.jsの231行目の下に、下記のコードを付け足しました。

if(window.opera){var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 30);}

これでばっちり回避できました!

==================================

こちらを参考にさせていただきました。

OperaでのLightbox 2のズレ

横並びにしたリストを中央揃えにする

リストをfloatやdisplayで横並びにしたものを、ナビゲーション等でよく使用します。
display: inlineでも横並びになるのですが、li要素間の改行が入ると隙間があいてしまうのがいやなので自分は通常floatを使用しています。

floatを使用した場合

css
li {
  float: left;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}


表示サンプル


displayを使用した場合

css
li {
  display:inline;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}


表示サンプル


しかし、横並びにしたリストを中央揃えにしたい場合、floatのleftやrightでは実現できません。float: centerがあればいいのにな・・・

という時に、display: inline-blockを使用します。
しかし、inline-blockはIE7以下とFirefox2に対応していないため、プロパティを追加します。


display: inline-blockを使用した場合

css
ul {
   text-align: center;
}
li {
  display: -moz-inline-box;
  display: inline-block;
  /display: inline;
  /zoom: 1;
  padding-right: 10px;
}
li a {
  background-color: #fff2cc;
}


表示サンプル


/display: inline;と/zoom: 1;はIE7以下用、display: -moz-inline-box;はFirefox2用の記述になります。
※上記の表示サンプルは、ココログで投稿するとソースが自動的に書き換わってしまうため、IE7以下とFirefox2では横並びになっていません。しかしソースをそのまま使用すればきちんと横並び中央揃えに表示されると思います。

==================================

こちらを参考にさせていただきました。

横並びリストを中央寄せにする

floatを指定した際に親要素の高さが算出されない場合

floatを指定した際に親要素の高さが算出されない場合clearfixを使用したりしますが、
自分はなんとなくclearfixを使用しないで作成したいので、
そういう場合はfloat、display、overflowプロパティあたりで対応しています。

このプロパティを使用してもあっちのブラウザはOKだけどこっちのブラウザはダメだった・・・
ということが多々ありましたが、こちらにいろいろまとめてありました。
ありがとうございます!忘れないようにメモ。

==================================

こちらを参考にさせていただきました。

clearfixを使わないでやるには。

« 2009年9月 | トップページ | 2010年4月 »