猫头鹰传送带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

回答

相关问题