貓頭鷹傳送帶2動態內容JSON

我使用JSON/AJAX顯示貓頭鷹傳送帶2的動態內容時出現問題。我在控制檯中沒有收到錯誤消息，但無法讓旋轉木馬工作。我只看到一個空白頁。我能夠追加從JSON文件獲取的圖像url與jquery.append，但他們不會顯示在旋轉木馬的方式。顯示設置爲「阻止」。任何提示我錯過了什麼？貓頭鷹傳送帶2動態內容JSON

的index.html -

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Rengastie</title> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="css/owl.carousel.min.css"> 
    <link rel="stylesheet" href="css/owl.theme.default.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 

    </head> 
    <body> 

    <div class="row"> 
     <div class="small-12 columns"> 
     <div id="top-carousel" class="owl-carousel owl-theme"> 

     </div> 
    </div> 
    </div> 

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="js/owl.carousel.min.js"></script> 
    <script src="js/app.js"></script> 

    </body> 
</html>

app.js -

$(document).ready(function() { 
    $('.owl-carousel').owlCarousel(); 

}); 

var $owl = $('.owl-carousel'); 

$owl.owlCarousel({ 
      loop:true, 
      items: 1, 
      autoplay:true, 
      autoplayTimeout:3000, 
      autoplayHoverPause:false 
}); 

$.ajax({ 
    url: 'json/data.json', 
    dataType: 'json', 
    success: function(data) { 
    var content = ''; 
    var alt = "pic123"; 
    for (i in data.owl) { 
      content += "<div class='item'><img src=\"" +data.owl[i].img+ "\" alt=\"" +alt+ "\"></div>"; 
     } 

    $owl.trigger('insertContent.owl',content); 
    //$owl.append(content); This stacks the images above eachother, not affected by the carousel settings 
    } 
});

data.json -

{ 
    "owl" : [ 
    { 
     "img": "img/kuvaIso1.jpg" 
    }, 
    { 
     "img": "img/kuvaIso2.jpg" 
    }, 
    { 
     "img": "img/kuvaIso3.jpg" 
    }, 
    { 
     "img": "img/kuvaIso4.jpg" 
    }, 
    { 
     "img": "img/kuvaIso5.jpg" 
    } 
    ] 
}

來源

2016-03-07 Jack M.

隨着2.0.0版本owlcarousel不支持項目從json加載數據了。但是他們確實支持自定義插件與運行中的核心進行交互。我需要開發一個插件來實現這一點。這是代碼。

/** 
* Owl Carousel JSON load plugin 
* @since 2.0.0 
* @author maksbd19 
* @link http://stackoverflow.com/questions/35838983/ 
*/ 

;(function ($, window, document, undefined) { 

    var Insatances = undefined; 

    var JSONload = function(carousel){ 

    this._core = carousel; 

    this.options = {}; 

    this._handlers = { 
     'initialized.owl.carousel': $.proxy(function(e) { 
      if (!e.namespace || !this._core.settings || !this._core.settings.path) { 
       return; 
      } 

      Insatances = Insatances || []; 

      if(!pathExists(this._core.settings.path, Instances)){ 
       Instances.push({ 
        path: this._core.settings.path, 
        onSuccess: this._core.settings.onSuccess, 
        onError: this._core.settings.onError, 
        loading: false 
       }); 
      } 

      for(var i in Instances){ 
       if(Instances.hasOwnProperty(i) && Instances[i].path != '' && !Instances[i].loading){ 

        Instances[i].loading = true; 

        $.getJSON(Instances[i].path, $.proxy(function (data) { 
         if (typeof Instances[i].onSuccess === "function") { 
          Instances[i].onSuccess.call(this, data); 
         } 
        }, this)).fail($.proxy(function (data) { 
         if (typeof Instances[i].onError === "function") { 
          Instances[i].onError.apply(this, [data]); 
         } 
        }, this)); 
       } 
      } 

      function pathExists(path, instance){ 
       if(instance.length == 0){ 
        return false; 
       } 
       for(var i=0; i<instance.length; i++){ 
        if(instance[i].path == path){ 
         return true; 
        } 
       } 

       return false; 
      } 

     }, this) 
    }; 

    this.options = $.extend(JSONload.Defaults, this._core.options); 
    this._core.$element.on(this._handlers); 
} 

JSONload.Defaults = { 
    path: '', 
    onSuccess:'', 
    onError:'' 
}; 

$.fn.owlCarousel.Constructor.Plugins['JSONload'] = JSONload; 
})(window.Zepto || window.jQuery, window, document);

，並利用這 -

var OC = $("#owl-demo-featured").owlCarousel({ 
    path : 'path/to/json', 
    onSuccess : function(r){ 
     if(r.length > 0){ 

      for(var i in r){ 
       if(r.hasOwnProperty(i)){ 
        var $html = ''; 
        // process you data with the template you want inject 
        OC.trigger('add.owl.carousel', jQuery($html)) 
       } 
      } 
      OC.trigger('refresh.owl.carousel') 
     } 
    }, 
    onError: function(r){ 
     console.error(r); 
    } 
});

這是把工作做了非常簡約的方式。您需要根據需要進行修改。

我希望這會幫助你。

更新

只注意到在這個過程中一個奇怪的事情。看起來Owlcarousel以某種單身模式加載它的插件。因此，如果網頁中有多個輪播實例，則只更新最後一個實例。我認爲它的異步行爲$.getJSON()但我不確定。無論如何，我做了一個工作，以符合

來源

2016-12-11 19:20:53 maksbd19

貓頭鷹傳送帶2動態內容JSON

回答

相關問題