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
<<
2012年04月
>>
日
月
火
水
木
金
土
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
最近の記事
jQueryを使ったSkitter(エフェクトが多彩なスライドショー)導入
2012年04月09日(月)
検索
OR
AND
スペースで区切って複数指定可能
日記投稿
PASS
++HOME++
[Admin]
[TOP]
shiromuku(fs6)DIARY
version 2.41
@ash_institute からのツイート
ASH INSTITUTE Blog