nivo slider | 日々の出来事

日々の出来事

感想など

jQueryでよく使われているスライドショーのプラグイン「nivo slider」を使ってみました。ど素人の僕が、今回無知だったせいで苦しんだ注意点など覚書しておきます。アニメーションは「fade」でしか試していません。

■画像毎にリンクを設定するには、「nivo slider」をもともとダウンロードしたときにデフォルトで入っているCSSの「/* If an image is wrapped in a link */」から下の部分が必要。


■CSSで、「#slider{ background : #fff url(../images/loading.gif) no-repeat 50% 50%; }

        #slider img { display:none; } 」
 以上の記載をしないと、IEでは最初にロードするとき、全部の画像が次々表示される現象がおきる。これも自分で消さなければもとから入っている。

■全部同じサイズの写真なのに、IEでは何故か、次の写真にスライドする瞬間1pxほど下にカクッとさがるような動きが発生してしまう。FireFoxでは大丈夫。(いまだに原因、解決できるのかも不明。どなたか知ってたら教えてください。)


■キャプションを自分でカスタマイズするために背景画像を読み込むと、IEでは何故かものすごく汚く表示される。FireFoxでは大丈夫。また、どちらも、文字をtext-indentで飛ばせない。なので、キャプションに画像は基本的に使えないと思う。文字サイズや位置は自由に変更できる。

(最初、キャプションを自前で準備しようとして、写真の下に予め書いた画像を用意したけど、写真と同じスピードでキャプションも変化すると、次の画像のキャプションと文字かぶりしてすごい変になる。)

■スライドショーは、紙芝居の仕組みでできているので、もし画像サイズが1枚目より2枚目が大きかったら、1枚目が表示されてる時点で、次の画像がはみ出て見えてしまう。逆にこれを利用して、1枚目に例えば水玉模様の穴などあけておけば、次の画面が一部穴からのぞいている絵本みたいにおもしろくできるかもしれない。