javascript - framework 7 swipebox not able to display append images in cordova android app -


<img src="img/banner2.png" alt="image" class="col-100">

1.above code display image in row. works fine when used static link append html using jquery.

<a href="img/banner2.png" rel="gallery-1"  class="swipebox col-33" title="my caption"></a>

2.when click on image, (image slider start) image enlarge , able swap left , right see other images. static code slider works fine append code image not enlarge , slider not working times.

html code below

      <div class="gallery row" >        <div id="gallery1" class="gallery row no-gutter ">                <a href="http://192.168.0.104/upload/gallery/3.jpg-22-2017-07-24-15-04:36:15pm.jpg" rel="gallery-1" class="swipebox col-33" title="my caption"> <img src="http://192.168.0.104/catking/upload/gallery/3.jpg-22-2017-07-24-15-04:36:15pm.jpg" alt="image" class="col-100"> </a>                <a href="img/banner2.png" rel="gallery-1"  class="swipebox col-33" title="my caption"> <img src="img/banner2.png" alt="image" class="col-100"> </a>                 <a href="img/banner3.png"  rel="gallery-1"  class="swipebox col-33" title="my caption"> <img src="img/banner3.png" alt="image" class="col-100"> </a>                <a href="img/banner4.png"  rel="gallery-1"  class="swipebox col-33" title="my caption"> <img src="img/banner4.png" alt="image" class="col-100"> </a>                <a href="img/banner2.png"  rel="gallery-1"  class="swipebox col-33" title="my caption"> <img src="img/banner2.png" alt="image" class="col-100"> </a>                <a href="img/banner1.png"  rel="gallery-1"  class="swipebox col-33" title="my caption"> <img src="img/banner1.png" alt="image" class="col-100"> </a>                <a href="img/banner2.png"  rel="gallery-1"  class="swipebox col-33" title="my caption"> <img src="img/banner2.png" alt="image" class="col-100"> </a>                <a href="img/banner3.png"  rel="gallery-1"  class="swipebox col-33" title="my caption"> <img src="img/banner3.png" alt="image" class="col-100"> </a>                <a href="img/banner4.png"  rel="gallery-1"  class="swipebox col-33" title="my caption"> <img src="img/banner4.png" alt="image" class="col-100"> </a>     </div>   </div>

javascript append code 

myapp.onpageinit('gallery', function (page) {       var gallery = "infrastructure";     var url="http://192.168.0.104/app/processapp.php?callback=?";      var datastring="gallery="+gallery+"&fetchgallery=";              $.ajax({             type: "post",             url: url,             data: datastring,             crossdomain: true,              cache: false,             beforesend: function(){ $("#login").html('connecting...');},             success: function(json){              var bigdata = json.parse(json);              var row = '';             $.each(json.parse(json), function(i, d) {                  $.each(d, function(j, e) {                      if(j == 'gallery_image') {                      row+='<a href="http://192.168.0.104/upload/gallery/'+e+'" rel="gallery-1" class="swipebox col-33" title="my caption"> <img src="http://192.168.0.104/upload/gallery/'+e+'" alt="image" class="col-100"> </a>';                      }                    });               });                $('#gallery1').append(row);               }              });    $('.swipebox' ).swipebox();  });

enter image description here

enter image description here

enter image description here

swipebox being fired before added content.

put

$('.swipebox' ).swipebox();

at end of ajax success, since adding dynamic content.


Comments

Post a Comment

Popular posts from this blog

html - How to set bootstrap input responsive width? -

Image
i need inline form calendar in both fields. reason can't rid of space between text , borders of input... here picture of problem i've tried set width parent div , input itself.... no good.. here i've done far. fiddle : <div class="modify_search"> <div class="search_wrapper"> <div class="search_header"> <form class="form-inline"> <div class="left"> <span>du</span> <div class="input-group"> <input type="text" class="form-control search_input" id="inlineforminputgroup"> <div class="input-group-addon"> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> </div>
Read more

javascript - Highchart x and y axes data from json -

here js fiddle : demo i plotting differences of timestamps in multiple series reading data json. how plot "timestamp","timestamp2","timestamp3" against "tempersensordata" instead of steps? var processed_json = new array(); //ts1 var processed_json1 = new array(); //ts2 // populate initial series (i = 0; < data.length; i++){ processed_json.push(data[i].timestamp/1000); processed_json1.push(data[i].timestamp2/1000); }
Read more

javascript - Get js console.log as python variable in QWebView pyqt -

Image
i'm trying build application creates html + js code python , loads qwebview. the final html + js code following (raw code available here ): <head><meta charset="utf-8" /><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><div id="mydiv" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.plotlyenv=window.plotlyenv || {};window.plotlyenv.base_url="https://plot.ly";plotly.newplot("mydiv", [{"type": "scatter", "x": [6.81, 6.78, 6.49, 6.72, 6.88, 7.68, 7.69, 7.38, 6.76, 6.84, 6.91, 6.74, 6.77, 6.73, 6.68, 6.94, 6.72], "y": [1046.67, 1315.0, 1418.0, 997.33, 2972.3, 9700.0, 6726.0, 6002.5, 2096.0, 2470.0, 867.0, 2201.7, 1685.6, 2416.7, 1618.3, 2410.0, 2962.0], "mode": "markers", "ids": [0, 1, 2, 3, 4, 5, 6, 7, 8,
Read more