0

私は小さな Dropbox 画像スライドショーを一緒にハッキングしています。私は Dropbox Public フォルダを使用して index.html ファイルを共有しています。このファイルは、スライドを作成するための一連の画像を 'img' フォルダで検索します。

私はこれを次のように行います。ハッキーですが動作します

var findFiles = function(slideLimit){
  var limit = slideLimit;
  var img = [];

  for(var i = 1; i < limit; i++){

    var src = "<li class='slide slide-"+i+"'><img src='img/"+i+".png' onerror='imgError(this);''></li>"
    $('.frame ul').append(src);

  }

}

それはうまく機能しますが、ユーザーが .png を使用しなければならないことに依存しないソリューションを提供したいと思います。

拡張機能を省略しても Dropbox で機能することを期待していましたが、うまくいかないことがわかりました。

    var src = "<li class='slide slide-"+i+"'><img src='img/"+i+"' onerror='imgError(this);''></li>"

私は頭を悩ませてきました、理想的には私はしたいです

if( mimeType = png)
   i + '.png'
else if (mimeType = gif)
   i + '.gif'
etc

解決策に少し行き詰まりました。誰でも良いアイデアはありますか？別の方向に進む必要があるかもしれません...

4

1 に答える 1

2

最善の方法は、ユーザーに内線番号を教えてもらうことです

var findFiles = function(slideLimit, ext){
    var limit = slideLimit,
        img = [],
        lis = [];
    ext = ext || "png";   
    for (var i = 1; i < limit; i++) {
        lis.push("<li class='slide slide-"+i+"'><img src='img/"+i+"."+ext+"' onerror='imgError(this);''></li>");
    }
    $('.frame ul').append(lis.join(""));
}

サーバーにファイルをpingします。欠点は、ファイルがそこにあるかどうかを確認するためにサーバーにアクセスし続けるのに時間がかかることです

var findFiles = function(slideLimit){
    var limit = slideLimit,
        img = [],
        lis = [],
        extList = ["png","gif"];

    function testExt () {
        var ext = extList.shift();
        if (ext) {
            var img = new Image();
            img.onload = function () {
                load(ext);
            };
            img.onerror = testExt;
            img.src="img/1." + ext;
        }
    }

    function load (ext){
        for (var i = 1; i < limit; i++) {
            lis.push("<li class='slide slide-"+i+"'><img src='img/"+i+"."+ext+"' onerror='imgError(this);''></li>");
        }
        $('.frame ul').append(lis.join(""));
    }

    testExt(); 
}

[両方のコード スニペットはテストされていないことに注意してください。エディターでここに記述しました]

于 2013-02-19T18:16:43.707 に答える