Tweet

Pocket

今現在のこのブログは、Techy boxのフリー版を少し改造して使っている。
(…と言っても、サイドバーを左に移動しているだけだが)

何が気に入ったかって、ページの頭にFeaturedが画像付きでどんどんスライドしていくところ。
…ところが、なんか1週目のループの調子がおかしい。
どうもバグがあるようだ。

スライド自体はjQueryを使っており、ソース自体は簡単だ。
(js/scripts.js を見ればすぐわかる程度)
setInterval関数を使って、どんどんフェードアウトインを繰り返しているのだが、
Firebugで状態を追っていくと、どうも画像のノードの初期のcssスタイルがおかしいようだ。

画像の部分のliノードは、本来読み込まれた時点では非表示である必要があるのだが、
どうもz-indexを0にしただけで、非表示にされていない。

…ということで、style.cssを

                #content .photo li {
                    position: absolute;
                    top: 0; left: 0;
                    z-index: 0;
                }
                #content .photo li.first {
                    z-index: 2;
                }

以下のように書き換えてやればいい

                #content .photo li {
                    position: absolute;
                    top: 0; left: 0;
                    z-index: 0;
                    display: none;
                }
                #content .photo li.first {
                    z-index: 2;
                    display: list-item;
                }

これでカッチョイイ(笑) トップページができあがる。