Rhinoslider をウィンドウのリサイズに対応させる

さまざまなエフェクトが用意されているスライダー、Rhinosliderをウィンドウのリサイズに対応させてみた。jQuery には、さまざまなスライダーのプラグインがある。最近は、レスポンシブデザインに対応したbxSliderを使うことが多いが、好みのエフェクトがないということで Rhinoslider を使うことになった。Rhioslider には8種類のエフェクトが用意されており、デモサイトでパラメーターを変更しながらエフェクトを試すことができる。

エフェクトが多彩で非常に便利なのだが、Rhinoslider を使うとイメージの幅と高さが固定されてしまうようだ。イメージの幅と高さが固定されていても気にならない箇所なら問題ないのだが、今回はウィンドウの幅に合わせて表示するという命題があったので、リサイズに対応させてみた。

執筆時点の Rhinoslider のバージョンは1.05、jQuery のプラグインなので jQuery を使う前提でコードを書いてみる。

ウィンドウのリサイズをイベントとして取得する

jQuery でリサイズのイベントを取得するのは簡単だ。

$(window).resize(function() {
... // リサイズ発生時のイベントを書く
});

しかし、リサイズが発生するたびに呼び出される。上記の例だと、ブラウザーのウィンドウを縮めていくと、何回もリサイズ発生時のイベントを実行する。「リサイズが完了した」ときにイベントを実行したいが、どのぐらいの時間ウィンドウのサイズが変更されなければ「完了」とみなすのか決めないといけないので、言語が「完了」を判断するのは不可能だ。自分が決めた単位時間、リサイズが発生しなければ「完了」とみなすコードを書けばよいが、一から書き起こすとバグを生みやすい。いろいろと調べてみると、[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行するという記事を見つけた。元ネタは、Stack Overflowのようだ。試してみると、2度実行してしまうことがあったので、少し改造して以下のようなコードにしてみた。

var timer = false;
$(window).resize(function() {
    if(timer) {
        return;
    } else {
        timer = true;
        setTimeout(function() {
            ... // 何らかの処理を実行
            timer = false;
        }, 200);
    }
});

これで、リサイズしたときの処理を書く準備ができた。

Rhinoslider を使っているオブジェクトを元に戻す

Rhinoslider を使うときは、以下のように記述する。「$(‘#rhinoslider’)」は、スライダーを定義した<ul/>タグを表す jQuery のオブジェクトだ。

$(document).ready(function() {
    $('#rhinoslider').rhinoslider({
        effect: 'slide'
    });
});

リサイズしたときは Rhinoslider を使う前の状態に戻して、再度 Rhinoslider を使う指定をする必要がある。Rhinoslider のソースを読む限り、「uninit」を呼び出せば良さそうだが呼び出し方がわからない。API の解説を読むと、「$(‘#rhinoslider’).data(‘rhinoslider’).functionName()」と呼び出せと記述があった。リサイズしたときのコードと合わせると、以下のようになる。

var timer = false;
$(window).resize(function() {
    if(timer) {
        return;
    } else {
        timer = true;
        setTimeout(function() {
            if($('#rhinoslider').data('rhinoslider')) {
                $('#rhinoslider').data('rhinoslider').uninit();
            }
            $('#rhinoslider').rhinoslider({
                effect: 'slide'
            });
            timer = false;
        }, 200);
    }
});

テストコード

上記のコードを実際に使うには、利用するイメージの高さを設定するなど少し工夫が必要だった。テストコードはイメージの高さが取得できないと無限ループしてしまうが、ひとまず動いている。テストコードのページを表示した後、ブラウザーの幅を変更すると上段は画像の大きさに変化がなく、下段は画像が拡大縮小されることがわかる。なお、「showTime」オプションを5000にしているので、スライドが始まるのは5秒以上経ってからだ。
Rhinoslider のテストコード
テストコードは Rhinoslider のコードを HTML に埋め込んでいる(WordPress に JavaScript ファイルをアップするのなんだなと思ったので)。