jquery - Owl carousel 2 dynamic content JSON -

-

i have problem displaying dynamic content owl carousel 2 using json/ajax. no error messages in console, cant carousel work. see blank page. able append image url's fetched json file jquery.append, wont shown in carousel way. displays set "block". tips missing?

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";     (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); stacks images above eachother, not affected 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"     }   ] }

as of version 2.0.0 owlcarousel doesn't support item loading json data anymore. indeed support custom plugins interact core on fly. needed develop plugin achieve this. here code.

/**  * 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 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 );

and use this-

var oc = $("#owl-demo-featured").owlcarousel({     path : 'path/to/json',     onsuccess : function(r){         if( r.length > 0 ){              for( var in r ){                 if( r.hasownproperty(i) ){                     var $html = '';                     // process data template want inject                     oc.trigger('add.owl.carousel', jquery($html) )                 }             }             oc.trigger('refresh.owl.carousel')         }     },     onerror: function(r){         console.error(r);     } });

this minimalistic approach job done. need modify per need.

i hope you.

update

just noticed strange thing process. seems owlcarousel loads plugins in singleton pattern. if there multiple instances of carousel in page last 1 being updated. think asynchronous behaviour of $.getjson() i'm not sure. anyway made work around comply


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more