Flashの代わりにjQueryプラグインSkitterでなんとかしろと言われたので

多くのエフェクトがあり、Javascriptサイドは特に気にせずにシンプルなマークアップだけで簡単にスライドショーが作れてしまう「Skitter」。
かっちょいいエフェクトがあるし、カスタマイズしてこれでオープニングFlashみたいなの作ってよと言われてしまいました。

とりあえず、いじってみて無理なら他のプラグイン探すか…と思ってたけど、なんとかクリアできたので今回行ったカスタマイズの紹介。

とりあえずSkitterで作ってみますか

Skitterのページから「Download on github」でzipなりなんなりの方法でダウンロードします。
ダウンロードしたものから、「css」「js」「images」フォルダを作業用のフォルダにコピーして、必要なファイル以外は消してしまいます。

必要なファイル

「css」フォルダ

  • skitter.styles.css

「js」フォルダ

  • jquery-1.6.3.min.js(とりあえず一番新しいので)
  • jquery.animate-colors-min.js
  • jquery.easing.1.3.js
  • jquery.skitter.js(minはカスタマイズしにくいので)

「images」フォルダ

  • 表示したい画像ファイル(001.jpgとかに上書きしてもいいです)
  • ajax-loader.gif
  • next.png
  • prev.png

ヘッダーでcssとjsを読み込んでおきます

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Skitterデモ</title>
<link rel="stylesheet" href="css/skitter.styles.css" />
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
</head>

htmlのマークアップ

<div class="box_skitter box_skitter_large">
  <ul>
    <li>
      <a href="http://today-only.net/"><img src="images/01.jpg" class="cube" /></a>
      <div class="label_text">
        <p>すずめ</p>
      </div>
    </li>
    <li>
      <a href="http://today-only.net/"><img src="images/02.jpg" class="cubeRandom" /></a>
      <div class="label_text">
        <p>せんろ</p>
      </div>
    </li>
    <li>
      <a href="http://today-only.net/"><img src="images/03.jpg" class="block" /></a>
      <div class="label_text">
        <p>はな</p>
      </div>
    </li>
    <li>
      <a href="http://today-only.net/"><img src="images/04.jpg" class="cubeStop" /></a>
      <div class="label_text">
        <p>かくれんぼ</p>
      </div>
    </li>
    <li>
      <a href="http://today-only.net/"><img src="images/05.jpg" class="cubeHide" /></a>
      <div class="label_text">
        <p>ぱくっ</p>
      </div>
    </li>
  </ul>
</div>

imgタグのclassに指定したエフェクトが適用されます。

2011/12/02現在のエフェクトの一覧

  • cube
  • cubeRandom
  • block
  • cubeStop
  • cubeHide
  • cubeSize
  • horizontal
  • showBars
  • showBarsRandom
  • tube
  • fade
  • fadeFour
  • paralell
  • blind
  • blindHeight
  • blindWidth
  • directionTop
  • directionBottom
  • directionRight
  • directionLeft
  • cubeStopRandom
  • cubeSpread
  • cubeJelly
  • glassCube
  • glassBlock
  • circles
  • circlesInside
  • circlesRotate
  • random
  • randomSmart

エフェクトがどんな感じかはSkitterのページで確認してください。

Skitterを実行

head内に書くなら

<script type="text/javascript">
$(document).ready(function(){
  $('.box_skitter_large').skitter();
});
</script>

</body>直前に書くなら

<script type="text/javascript">
$(function(){
  $('.box_skitter_large').skitter();
});
</script>

画像のサイズが違うのでskitter.styles.cssの48行目のwidthとheightも書き換えておきます。
クラス名とか変えちゃってもいいです。

.box_skitter_large {width:720px;height:480px;}

とりあえずこれだけで動きます。

デモページ

写真の上に乗っかってるものを取り除く

イメージギャラリーとして使いたいわけじゃないので、不必要なものはとっちゃいましょう。
ここはSkitterのオプションで簡単に設定できます。

$('.box_skitter_large').skitter({numbers:false, navigation:false, label:false});

「numbers」で左上の番号、「navigation」で左右の矢印、「label」で写真の説明文が消えます。
label:falseを設定する代わりに、liタグ内の<div class=”label_text”>を最初から入れない手もあります。下のデモページもそのようにしています。

デモページ

その他のオプションは各個人で調べてください。
今回のような用途で使うとしたら、「xml」だったり「interval」くらいでしょうかね。

ループさせず、最後の画像表示後に別ページへ

ここからはjquery.skitter.jsを見ていきます。

とりあえず最後の画像の後に最初の画像になるわけだから、jQueryの:lastセレクタあたりかなと思って、検索してみても「Elastic」ばかり検索にかかるのでボツ。

じゃあ、liタグの個数を数えて何かのlengthと比較してるのかなと思って、lengthで検索してみる。
検索してみると「settings.images_links.length」が多く、それと比較されてるのが「settings.image_i」。
で、「settings.image_i」は43行目でdefaul値として1が代入されてるのし、名前的にもこれだろうなと思って、この値がいつ変わっているのかチェックしてみる。

まぁ、「complete」とか「start」あたりだろうと予測して、ひとまず「complete」で検索すると1822行目に「completeMove」というのがあるので、ここの中で

console.log(this.settings.image_i);

してみる。
見てみると、エフェクト切り替えの前に値が変わっており、一番最初の画像に切り替わる時に「settings.image_i」の値は0に変わっているので、こんな感じにしてやればいい。

jquery.skitter.js

completeMove: function ()
{
  if(this.settings.image_i == 0){
    document.location.href = "http://today-only.net/";
    return; //以降の処理をさせない
  }
  //省略
}

もし修正が入った場合にjsファイルを開いて、URL変えるのがめんどくさいって場合はオプションの設定ができるようにプロパティを作ってしまえばいい。

jquery.skitter.js

//27行目
var defaults = {
  redirectURL: null,
  //省略
}

/* 省略 */

//1823行目あたり
completeMove: function ()
{
  if(this.settings.image_i == 0){
    //もし「redirectURL」に値があるなら
    if(this.settings.redirectURL){
      document.location.href = this.settings.redirectURL;
      return; //以降の処理をさせない
    }
  }
  //省略
}

html内

$('.box_skitter_large').skitter({numbers:false, navigation:false, redirectURL:'http://today-only.net/'});

こうすれば、html内だけの変更で済むし「redirectURL」の値を設定しなければ、普通にスライドギャラリーとしても使えるようになります。
これで完成!と思わせておいて、実は画像にカーソルを乗っけるとスライドが止まるようになってるので、これをなんとかしなければなりません。(それでもいいって人はこのままでいいと思います。)

ということでマウスオーバーで止まるのをなんとかする

まぁ、簡単に「mouse」あたりで検索すればいいだろうと容易に想像がつきますね。
1977行目あたりに「stopOnMouseOver」とあるので、こいつを動作させてる行を探します。

jquery.skitter.jsの477行目あたりに

this.stopOnMouseOver();

とあるので、こいつをコメントアウト。
または先ほどのようにオプションの設定ができるようにプロパティを作ってしまいましょうか。

jquery.skitter.js

//27行目
var defaults = {
  isMouseOver: true,
  //省略
}

/* 省略 */

//477行目あたり
if(this.settings.isMouseOver){
  this.stopOnMouseOver();
}

html内

$('.box_skitter_large').skitter({numbers:false, navigation:false, isMouseOver:false, redirectURL:'http://today-only.net/'});

はい、これで完成です。
ちなみに最初の一枚目のフェードは仕方ないんで、どうしても変えたい方はなんとかがんばってください。
画像のリンク先はSkip代わりとして使うのがいいんじゃないかと思います。

デモページ

え?Skipなんかさせたくない?

ホント、君は仕方ないやつだ。

実は画像を囲ってるaタグを外しても、画像の切り替え終わると勝手に#へのリンクがついてしまい、カーソルが指ボタンになってしまいます。
なのでこれは仕方なく#に飛んでもらうとして、カーソルの見た目を変えてしまおう。

.box_skitter_large a img {
  cursor: default;
}

はい、これで完了。
でも、必ずどこかにskipボタンはつけてあげてね。画像の上に乗っけるならz-index:100くらいしとけば大丈夫だから。

12/18追記

コメントよりthumbモードのサムネイルを大画像と別の画像にしたいとのことなので解決してみた。

まずはimgタグにサムネイルで指定したい画像のパスを書きます。

html内

<li>
  <a href="http://today-only.net/"><img src="images/01.jpg" class="cube" thumb="images/02.jpg" /></a>
  <div class="label_text">
    <p>すずめ</p>
  </div>
</li>
<!-- 指定してない場合 -->
<li>
  <a href="http://today-only.net/"><img src="images/02.jpg" class="cubeRandom" /></a>
  <div class="label_text">
    <p>せんろ</p>
  </div>
</li>

これだけでは動かないのでjquery.skitter.jsの中身を書き換えます。

jquery.skitter.js

//195行目あたり
// Load from HTML
else {
  //省略
  var link = ($(this).find('a').length) ? $(this).find('a').attr('href') : '#';
  var src = $(this).find('img').attr('src');
  var animation_type = $(this).find('img').attr('class');
  var label = $(this).find('.label_text').html();
  var thumb = $(this).find('img').attr('thumb'); //新たにthumbという変数を追加。
  addImageLink(link, src, animation_type, label, thumb); //末尾にthumbを渡すのを忘れずに
  //省略
}

xmlで使いたい場合は170行目あたりで同じように変更してください。そのときはfind(‘img’)の中身を「image」にするように。
あとはaddImageLink関数の中身をいじってあげるだけ。

//145行目あたり
var addImageLink = function (link, src, animation_type, label, thumb) { //thumbを引数として受け取っています
  //省略
  if (self.settings.thumbs) {
  //省略
  else {
    dimension_thumb = 'width="100"';
  }
  //imgタグにthumbが指定されてなかった場合はsrcの中身を使う
  var imgSrc = (thumb) ? thumb:src;
  self.box_skitter.find('.info_slide').append(
    '<span class="image_number'+initial_select_class+'" rel="'+(u - 1)+'" id="image_n_'+u+'_'+self.number_skitter+'">'
    +'<img src="'+imgSrc+'" '+dimension_thumb+' />' //srcをimgSrcに書き換える
    +'</span> '
  );
  //省略
}

これで完成です。
デモページ
2番目の画像以外はサムネール画像と大きい画像があべこべになってると思います。(2番目はimgタグでthumbを指定してないのでsrcで指定されている画像が使用されてます。)

※本記事宛てに、skitter.jsのカスマタイズの仕方のヘルプコメントが多いのですが、コメントのやり取りではキリがないため、メールにて対応しております。メールアドレスはAboutのお問い合わせよりご確認ください。



この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

thumbモードのサムネイルは大画像と別の画像にしたいのですが、方法ありませんか?

tetsu2011年12月18日 12:12 PM

>tetsuさん
追記しましたので読んで試してみてください。

loop04292011年12月18日 6:36 PM

さっそく試したいと思います、リクエストにお答えいただきありがとうございました

tetsu2011年12月19日 7:19 PM

失礼いたします!フェードの速度を指定する事は出来ますか?1枚1枚がゆっくり出てきてゆっくり消えていく方法はありますか?すみません!

mi2012年1月31日 1:26 AM

SkitterのDocumentationにも書いてありますが、velocityを指定してください。

(例)
$(‘.box_skitter_large’).skitter({velocity:0.5});

デフォルトが1で、0~1の間だと遅くなります。1より大きくすると早くなります。

loop04292012年1月31日 10:35 AM

早速試してみます。丁寧にお答えいただき感謝します!

mi2012年2月1日 1:17 AM

こんにちは。
skitterの実装はできたんですが、IE9で表示させるとスライドショー画像の左と上にラインが出ます。マウスオーバーで色が変わったりするのでalinkだかvlinkっぽいんですが、これ消すの何とかなりませんでしょうか。
firefox、chromeは共に問題なしです。
すみませんがご教示ください。お願いします。

takashina2012年2月11日 5:37 PM

IE9で確認する環境がないのですが、CSSに
img { border: 0; }
と書けば解決しそうですが、どうでしょうか。

loop04292012年2月12日 10:47 PM

ありがとうございました。
上記方法であっさり解決しました。
下名未熟者ゆえ、お手数をおかけしました。m(_ _)m

takashina2012年2月13日 8:06 PM

こちらを参照にskitter実装できました。
ありがとうございます。
しかし、インラインフレーム内に表示をさせると
リンク先をそれぞれ target=”_parent” で指定しても、
1枚目の画像は親フレームに表示されるのに、2枚目以降の画像のリンク先がどうしてもインラインフレーム内に表示されてしまいます。
解決策はありますか?

mocha2012年4月3日 12:44 AM

でしたら、インラインフレームでしか使わないことを前提に話をします。

skitter.jsの80行目にある「structure」の内容を書きかえます。

85行目
「<a href=""><img class="image_main" /></a>」を
「<a href="" target="_parent"><img class="image_main" /></a>」
に書き換えてください。

skitter.jsのバージョンによって「structure」のある行数が多少前後すると思うので個人で探してください。
実際に試してはないですが、これで大丈夫だと思います。

loop04292012年4月4日 12:50 PM

解決いたしました。ありがとうございました。

mocha2012年4月6日 12:00 AM

初めまして。私もskitterをインラインフレーム内で使用しています。
私の場合は target属性が _topなので、上記コメントにあるように
>skitter.jsの80行目にある「structure」の内容を書きかえます。
>85行目
>「<a href=""><img class="image_main" /></a>」を
>「<a href="" target="_top"><img class="image_main" /></a>」
>に書き換えてください。
としていますが、
もちろんうまくリンク先が開くことが多いですが、
画像アニメーション開始時、または終了時に画像をクリックすると
インラインにフレーム内にリンク先のページが開いてしまいます。
アニメーション実行中はリンクが無効になるような設定はないのでしょうか?
何かいい方法があればお教えください。

tok2012年4月24日 6:00 PM

Chromeでしか見てませんが、単純にimgタグを囲うaタグにtarget=”_top”を指定するだけでなんとかなるのでなんとも言えませんが、jquery.skitter.js内に書かれている、”_self”を”_top”に全て変えてみるとかしてみてはどうでしょうか。

アニメーション中にリンクを無効にする方法も色々試してみたんですが、いい解決策がなかったので、どうしてもというなら開発者にコンタクトを取ったほうがいいでしょう。

loop04292012年4月28日 4:45 PM

[...] http://today-only.net/customizing-skitter/ カテゴリー: スライドショー | 投稿日: 2013年1月25日 | 投稿者: admin [...]

skitterの使い方 | wordpress忘備録2013年1月25日 9:49 PM

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ