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

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -