slidr.jsで起きるバグの対処法

はじめに

Webサイトで画像をスライドさせる事案が発生したため、ちょっと古いけどslidr.jsと呼ばれるライブラリを使って実装した際に遭遇したエラーの対処方について誰かの助けになればと思い記述。

slidr.jsとは

• https://github.com/bchanx/slidr
• jsで画像のスライドをするためのライブラリ
• jQuery必須
• 日本語の記事多め
• ただ、更新は２年止まってる

【バグ①】画像がダウンロード仕切る前にスライドが動いてしまう

これは色々な画像スライド系ライブラリで起こりうるよくある問題のようだ。
今回実装した例だと、JSでS3からリストで画像一覧を取得 → DOMに配置し、スライダーを起動している。

ダメな例

$.ajax({
    // s3のimagesディレクトリの画像を取得している。
    // この例だと80x80_1.jpg, 80x80.jpgなどが引っかかる
    url: "http://s3-xxxxx/?prefix=images/80x80",
}).done(function(data){

    var j = 0;

    // Contentsに画像のリストがあるため取得
    var contentImages = $(data).contents().find('Contents');

    var imgList = "";

    $.each(contentImages, function() {

        // /images/80x80_1.jpg, /images/80x80.jpgなどが入る
        var key = $($(this).find('Key')[0]).text();

        // imgタグの作成
        var img = "<img data-slidr='" + j + "' src='http://s3-xxxxx" + key + "'>";
        // 各イメージタグを格納
        imgList = img + imgList;

        j++;

    });

    // `img`のリストを`DOM`に追加
    $('#slidr-img').prepend(imgList);

    // スライドスタート
    var s = slidr.create('slidr-img', {
            controls: 'border',
            fade: false,
            theme: "#000",
            breadcrumbs: false,
            touch: true
        }).add('h', ['0', '1']).auto(3500);
}).fail(function(data){

});

上記の例だとスライドをスタートした際に、各imgタグはDOMに追加したばかりなので画像のダウンロードが終了していなく、ぺちゃんこ状態のまま動き出してしまう。

そこで、jQueryのload関数を使うことですべてのダウンロードが終了した際に開始させるようにすると解決する。

良い例

$.ajax({
    // s3のimagesディレクトリの画像を取得している。
    // この例だと80x80_1.jpg, 80x80.jpgなどが引っかかる
    url: "http://s3-xxxxx/?prefix=images/80x80",
}).done(function(data){

    var j = 0;

    // Contentsに画像のリストがあるため取得
    var contentImages = $(data).contents().find('Contents');

    // 追加：ダウンロードした数を数えるための変数定義
    var totalImages = contentImages.length;
    var loadImages = 0;

    var imgList = "";

    $.each(contentImages, function() {

        // /images/80x80_1.jpg, /images/80x80.jpgなどが入る
        var key = $($(this).find('Key')[0]).text();

        // imgタグの作成
        var img = "<img data-slidr='" + j + "' src='http://s3-xxxxx" + key + "'>";
        // 各イメージタグを格納
        imgList = img + imgList;

        // 追加：各imgタグに終了を通知するイベント
        $(img).on('load', function () {
        loadImages++;

        // 画像がすべてダウンロードした場合にのみ、`DOM`に追加し、スライドをスタートさせる
        if (loadImages == totalImages) {
            // `img`のリストを`DOM`に追加
            $('#slidr-img').prepend(imgList);

            // スライドスタート
            var s = slidr.create('slidr-img', {
                    controls: 'border',
                    fade: false,
                    theme: "#000",
                    breadcrumbs: false,
                    touch: true
                }).add('h', ['0', '1']).auto(3500);
        }

        });

        j++;

    });


}).fail(function(data){

});

【バグ②】勝手に画像のサイズを決められる

こちらはslidr.js特有のバグ。
スライダーで動く各imgタグの画像たちは、画像のサイズが指定していない場合、自動でサイズを取得していて、どうもそれがおかしな挙動になる。

問題そうな箇所

var dynamic = {
        width: cloneWidth === 'auto' || cloneWidth === originalWidth || minWidth !== 0 && minWidth != 'auto',
        height: cloneHeight === 'auto' || cloneHeight === originalHeight || minHeight !== 0 && minHeight != 'auto'
};

そこで、親のDOMにあらかじめサイズを指定してあげるとslidr.jsはそのサイズを取得し、各imgタグにも設定することで無理して自動で所得しないため解決する。

設定例

// スライダーが開始される前に`DOM`のサイズを固定
var w = $(window).width();
$('.slide_parent').width(w);
$('. slide_parent').height(w * 0.75);

$.ajax({
....

てな感じで一応は問題なく動いております！
コードは適当に変更したのを載せているので、適宜修正してください！！