豊富なエフェクトのjQueryスライドショー skitter が設置しやすくてカッコイイ!導入メモ

skittersan

jQueryを使ったスライドショーというと、多くの有志の方がリリースしているジャンルなわけでFLASHにとって代わるくらい利用され始めていますね。('A')

といっても、設置が面倒だったり表示が単調だったり自作できない人にとっては導入を見送るの事もあったと思います。今回紹介するSkitter は豊富なエフェクトを備えかつ、設置・設定が非常に簡単だったので導入用のメモを含めて書いておきます。

2012/3/19
プログレスバーやアニメーションの追加など大幅アプデートがされたので再度記事を書きました。こちらもどーぞ。
30以上のアニメーションにプログレスバーの追加など多機能スライドショーSkitterが本当にすごい!導入方法など|susi-paku web

Skitter - Slideshow for anytime!

Skitter の豊富なエフェクトとできること

とりあえず、公式サイトでデモが閲覧できるので見てみましょう。

pasiks000690

エフェクトの種類はこんだけ選ぶことができます。('A') Cube タイプで画像が切り替わると非常にかっこいいね。('A')

また、ナンバリングとナビゲーションも付いているのでイメージギャラリーとしても利用できそうだね。

pasiks000691

Navigation の種類も3種類選ぶことができます。

【Numvers】

pasiks000692

【Thumbs】

pasiks000693

【Dots】

pasiks000694

画像部分にナビゲーションを表示させたくない場合など Thunmbs,Dotsは便利ですね。

pasiks000695

他には、表示方法の設定もすることができます。
Normal が通常の表示の仕方
HideTools  はマウスをロールオーバーするとナンバーとナビゲーションが表示される設定(通常時は表示されない)
Fullscreen は全画面表示してくれる そんな形です。

pasiks000696

あとはおまけで mini-slides というのも付いているのでサイドバーあたりにちっちゃくイメージギャラリーみたいのを追加するときとかいいね。('A')

導入や設定方法について

公式からJSなどをダウンロードします。
thiagosf/SkitterSlideshow - GitHub
(落ちてた場合はこちらからどーぞ)

pasiks000688

解凍すると上記ファイルが展開されます。表示させるのに全部のファイルは必要ではないのでさくっと表示させてみます。
うちでデモサイトを作ってみたのでこちらから
skitter 導入デモサイト



<head>

<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.skitter.min.js"></script>

<script>
$(function(){
$('.box_skitter_large').skitter({interval: 4000});
});
</script>
</head>




まずは、JSファイルとCSSを<head>部分に挿入します。
次に、表示させたい部分を<div>で指定します。


<div id="skitter">
<div class="box_skitter box_skitter_large">
    <ul>
        <li>
        <a href="images/001.jpg" rel="lightbox" ><img src="images/001.jpg" class="cubeStopRandom" /></a>

        </li>
        <li>
        <a href="images/002.jpg" rel="lightbox"><img src="images/002.jpg" class="cubeStopRandom" rel="lightbox"/></a>

        </li>
    </ul>
</div>
</div>


これで終わり。<li>で囲った部分がスライドショーとして表示されるわけです。
ちなみにデモページでは、lightbox を入れて、rel="lightbox"を追記してます。これによって、画像ごとにlightboxで拡大画像を表示させることができますね。便利ですね。('A')

各種エフェクトの設定やオプションの設定など

あとはオプションで各項目を追加できます。


option description default example
velocity    Velocity of animation    1  
$('.box_skitter_large').skitter({velocity: 2});
interval    Interval between transitions    2500  
$('.box_skitter_large').skitter({interval: 3000});
animation    Default animation    null or defined in <a> class   
$('.box_skitter_large').skitter({animation: 'fade'});
numbers    Numbers display    true   
$('.box_skitter_large').skitter({numbers: false});
navigation    Navigation display    true  
$('.box_skitter_large').skitter({navigation: false});
label    Label display    true  
$('.box_skitter_large').skitter({label: false});
easing_default    Easing default    null   
$('.box_skitter_large').skitter({easing_default: 'easeOutBack'});
animateNumberOut    Animation/style number    {backgroundColor:'#333', color:'#fff'}  
$('.box_skitter_large').skitter({animateNumberOut: {backgroundColor:'#000', color:'#ccc'}});
animateNumberOver    Animation/style hover number    {backgroundColor:'#000', color:'#fff'}   
$('.box_skitter_large').skitter({animateNumberOver: {backgroundColor:'#000', color:'#ccc'}});
animateNumberActive    Animation/style active number    {backgroundColor:'#cc3333', color:'#fff'}   
$('.box_skitter_large').skitter({animateNumberActive: {backgroundColor:'#000', color:'#ccc'}});
thumbs    Navigation with thumbs    false   
$('.box_skitter_large').skitter({thumbs: true});
hideTools    Hide numbers and navigation    false   
$('.box_skitter_large').skitter({hideTools: true});
fullscreen    Fullscreen mode    false   
$('.box_skitter_large').skitter({fullscreen: true});
xml    Loading data from XML file    false   
$('.box_skitter_large').skitter({xml: "xml/slides.xml"});
dots    Navigation with dots    false   
$('.box_skitter_large').skitter({dots: true});


これを実装したい場合は、先に書いたJS部分に

<script>
$(function(){
$('.box_skitter_large').skitter({interval: 4000});
});
</script>

ここに、追記していきます。上記の場合インターバル4000に設定しているので、ここへhideTools(マウスオーバーで表示させる)を追加する場合は

<script>
$(function(){
$('.box_skitter_large').skitter({interval: 4000,hideTools: true});
});
</script>

っとカンマ区切りで追記すれば設定することが可能となりますよ。

っと言う感じで簡単に設定導入できるskitterをぜひ導入してカッコイイスライドショーを表示させていかがでしょうか。('A')ノおしまい

2012/3/19
プログレスバーやアニメーションの追加など大幅アプデートがされたので再度記事を書きました。こちらもどーぞ。
30以上のアニメーションにプログレスバーの追加など多機能スライドショーSkitterが本当にすごい!導入方法など|susi-paku web