【Javascript】jquery.cross-slide.jsの改造 | Wood-Roots:blog

2012
04/04

jquery.cross-slide.jsの改造

CrossSlideというjQueryプラグインがあるのですが、使用する画像のパスをスクリプト内に書かないといけないのがちょっと不満だったのでHTMLから画像を取得してスライドショーを実行するという仕組みに改変しました。

以下のように指定して使用するのですが、

1
2
3
4
5
6
7
8
9
$('#placeholder').crossSlide({
  sleep: 2,
  fade: 1
}, [
  { src: 'sand-castle.jpeg' },
  { src: 'sunflower.jpeg'   },
  { src: 'flip-flops.jpeg'  },
  { src: 'rubber-ring.jpeg' }
]);

こういう感じのHTMLに対して適用させたい。

1
2
3
4
5
<ul id="slide">
<li><img src="a.jpg" alt="" /></li>
<li><img src="b.jpg" alt="" /></li>
<li><img src="c.jpg" alt="" /></li>
</ul>

コード内のplanという変数が画像パスを受け取っているところですので、このplanをHTMLから取得するように改変します。

100行目あたり

1
$.fn.crossSlide = function(opts, plan, callback)

を

1
$.fn.crossSlide = function(opts, callback)

に変更（スクリプト上の第２引数を使わない）。

109行目あたりに以下を追加。
デフォルトでは画像ごとにアニメーションを指定できるのですが、fromとtoをいくつか用意しておきその中からランダムで選ぶというかたちにしました。

1
2
3
4
5
6
7
8
9
10
11
12
13
var fromarr = Array('100% 100% 1x','100% 0% 1.2x','0% 100% 1x','100% 50% 1x');//fromにはこれのどれかが入る
var toarr = Array('100% 50% 1.2x','40% 100% 1x','20% 80% 1.5x','30% 50% 1.2x');//toにはこれのどれかが入る
var objarr = $(this).find('li');//画像の親要素
//以下でplan配列を自力で生成
var plan = new Array();
$.each(objarr,function(key,value){
plan[key] = new Array();
plan[key]['src'] = $(this).find('img').attr('src');
plan[key]['from'] = fromarr[Math.floor( Math.random() * 3 )];
plan[key]['to'] = toarr[Math.floor( Math.random() * 3 )];
plan[key]['time'] = Math.floor( 1+Math.random() * 4 );
});

実行の際は画像パスを指定していた部分の引数は含めずに書きます。

1
2
3
    $('#slide').crossSlide({
      fade: 1 //画像パスに指定しないオプションは普通に指定する
            });

これでHTML上に存在する要素からアニメーションを生成することができます。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

Category

Archive

Search

Social