ASH INSTITUTE Blog

jQueryを使ったSkitter(エフェクトが多彩なスライドショー)導入



トップページのメインビジュアルをちょっと今風に楽しめるように、という事で。
ここ↓が参考になって、とても助かりました。

Flashの代わりにjQueryプラグインSkitterでなんとかしろと言われたので
http://today-only.net/customizing-skitter/

jQueryを使ってのスライドショープはすごくたくさんありますが、
このSkitterは中でもエフェクトが多彩で設定も比較低簡単なのが特徴です。
今表示している画像が何枚目のものかわかるインジケーターや、
ナビゲーション、キャプションの文字等、色々表示できるのですが、
私の場合、ギャラリーとして使うわけではないので、これらは全て非表示にしました。

これにする前の少しの間だけ使っていたのは、同じjQueryを使ったmaxImage。
これは、指定した背景画像をブラウザサイズに合わせてフルスクリーンに拡大して、
更にスライドショーにしてくれる、というもの。
これを導入した時は、ここ↓のサイトが役に立ちました。

ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示する
CSSやjQueryプラグインいろいろ

http://webdesignrecipes.com/how-to-full-page-background-image-with-css-and-jquery/

これはこれで良かったのですが、フルスクリーンにするためにどうしても画質が粗く
なり、ぼやける。レイアウト上の適正な大きさのバランスというものもあるし…、
でしばらくモヤモヤしていました。
モヤモヤしつつも使っていたわけですが…、結局フルスクリーンで表示しようとする限り、
これらの問題から逃れられないし、偶然いいバランスの大きさで表示されたとしても
背景画像はクリアな画質では見てもらえない。 それなら、これはもうやめとこう…、
という事で、今回のSkitter導入となりました。
またしばらくはこれでいいかなと思います。

どちらも良く出来ていて楽しめるし、こういった詳しい解説をウェブ上でやってくれる
方々がいてくれてとても助かります。みなさん優秀で親切。
2012年04月09日(月) No.41 (車以外のデザイン、Webデザイン、他)
Comment(0) Trackback(0)

この記事へのコメントは以下のフォームからどうぞ

Name
E-Mail
URL
感想
500文字まで
Icon Icon
投稿キー 投稿キーを右に記入して下さい
Pass

この記事のトラックバックURL

https://ash-institute.cats.st/cgi/diary/sfs6_diary/sfs6_diary_tb.cgi/2012040941
No. PASS

       
   














ASH INSTITUTE Blog