アーカイブ年: 2010

list-style-imageに設定した画像と文字がずれて気持ち悪いときがありますよね。
でも list-styleでは微調整ができなくて、「ああ、こんなもんか」と思うだけなんですけど、そういうときは backgroundでやったらどう？ということです。

ul {
  list-style-type:none;
}
li {
  background:url(images/sankaku.gif) left no-repeat;
  text-indent:10px;
}

こんな感じです。それだけですけど、なにか？

jCarousel Liteでカルーセル（縦横スライド）してるとき、スライドする要素を入れ替えたいなと。
　

<div class="carousel">
  <div class="jCarouselLite">
    <ul>
    <li><img class="c1" src="images/thumb-01" /></li>
    <li><img class="c2" src="images/thumb-02" /></li>
    <li><img class="c3" src="images/thumb-03" /></li>
    </ul>
  </div>
</div>

　
普通、こんな風に書きます。（idとclassは普通付けませんが説明のため便宜的に付けました）
この＜li＞要素をこういう風に書かないで、投稿のカテゴリ一覧から取ってきて、動的に突っ込むのはどうだろうということです。（最初の＜ul＞は空っぽということですね）
　

jQuery("#xxx").append("<li><img src='images/thumb-04' /></li>");

　
こうして appendすると確かに要素としてはアペンドされてるっぽいんですけど、アペンドされた内容がカルーセルしません。
じゃあ、最初に必要な分だけ並べておいて、srcを書きかえればいいじゃん、ということで、
　

jQuery("#i1").attr("src", "images/thumb-04");

　
こうやってみましたが、うまくいきません。正解はコレ！
　

jQuery("#c1").attr("src", "images/thumb-04");

　
jCarousel Liteのコードを読んでみるとわかるんですが、サーキュラー（くるくる回る）のときは、＜li＞要素をクローンしているんですね。
　

if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}

　
だから、idでソースを指定してもクローンされる前のソースが書き変わるわけではないのでダメ、なのかな？
クラス指定だったら、元のもクローンのも全部書き変えちゃうからOKね。
appendがダメなのは、クローンされる前に appendできないからだろうか。jCarousel Liteより先に appendしてるつもりなんだけど、難しいね。
　
参考：jQuery でoption要素を追加した際の諸問題