動的に画像をサーバーからjtinderに読み込みます

Question

私はjinderを使って似たような効果を作り出しています。ここに図書館があります。

https://github.com/do-web/jTinder 

ページが最初に呼び出されたときに読み込まれた5つの画像のうちの4番目の画像にユーザーがいるときに、画像を動的に追加したいと思います。

ここではJavaScriptを使用して動的な呼び出しを行っていますが、サーバーからデータを呼び出す方法がわかりません。すべてのイメージのパターンと名前は毎回異なります。

 $.fn[ pluginName ] = function (options) { 
    this.each(function() { 

     if (!$.data(this, "plugin_" + pluginName)) { 
      $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
     } 
     else { 
      $.data(this, "plugin_" + pluginName).bindNew(this); 
     } 

    }); 

    return this; 
}; 

第四の画像をスワイプされた後jqueryの/アヤックスサーバーに呼び出すようにする任意のヘルプは

Answer 1

はjTinder.jsでのプラグインのプロトタイプにdestroyメソッドを追加し、大きな助けになります。

destroy: function(element){ 
    $(element).unbind(); 
    $(this.element).removeData(); 
} 

次のようにします。

 init: function (element) { 

     container = $(">ul", element); 
     panes = $(">ul>li", element); 
     pane_width = container.width(); 
     pane_count = panes.length; 
     current_pane = panes.length - 1; 
     $that = this; 

     $(element).bind('touchstart mousedown', this.handler); 
     $(element).bind('touchmove mousemove', this.handler); 
     $(element).bind('touchend mouseup', this.handler); 
    }, 

    destroy: function(element){ 
     $(element).unbind(); 
     $(this.element).removeData(); 
    } 

    showPane: function (index) { 
     panes.eq(current_pane).hide(); 
     current_pane = index; 
    }, 

次に、最初に取得する関数addcard（）を作成します。 JSONソースを削除し、jTinderイベントを再初期化します。

function addcard(){ 
    $.getJSON("example.json",function(data){ 
     //assign the data 
     var elem="<li>"+data+"</li>"; 
     //delete existing jTinder event 
     $("#tinderslide").data('plugin_jTinder').destroy(); 
     //reinitialize new jTinder event 
     $("#tinderslide").jTinder({ 
      onDislike:function(){ 
       doSomething(); 
      } 
      onLike:function(){ 
       doSomethingElse(); 
      } 
     }); 
    }); 
} 

新しいカードを追加する必要があるときはいつでも、addcard()に電話してください。