framework 7 swipebox 无法在 cordova android 应用程序中显示附加图像

Question

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

1.above 代码在行中显示图像。使用静态 link 以及使用 Jquery.

追加 html 时工作正常

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

2.when 点击图片，（图片滑块启动）图片放大，可以左右切换查看其他图片。对于静态代码滑块工作正常但对于附加代码图像不放大并且滑块有时也不起作用。

HTML 下面的代码

      <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 附加代码

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();

});

Answer 1

在添加内容之前触发滑动框。

放

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

在 ajax 成功结束时，因为您正在添加动态内容。

framework 7 swipebox 无法在 cordova android 应用程序中显示附加图像

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

javascript

jquery

android

cordova

html-framework-7