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(); });
swipebox being fired before added content.
put
$('.swipebox' ).swipebox();
at end of ajax success, since adding dynamic content.
Comments
Post a Comment