Flex滑块移动时没有图像

时间:2017-05-11 21:00:07

标签: javascript jquery html css cordova

我一直在尝试各种事情来发现为什么图像没有出现在我的iPhone中的phonegap应用程序的flex滑块内,我已经检查了链接的顺序,但是没有任何图像出现。

- 当我尝试将flexslider的js& css链接的 https 更改为 http 时,这是result

- 当我将flexslider的js& css的链接添加到 https 时,这就是结果,滑块没有图像移动(https://i.stack.imgur.com/H0c2i.jpg)

  • 当我删除两个链接时,图像显示为列表-_-

我已经尝试了它的小提琴和它的工作但不能在我的手机http://jsfiddle.net/CPpBD/677/上工作 它是相同的链接和每件事

// HTML

 <html>
                <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://*.gstatic.com * ws:;style-src 'self' 'unsafe-inline' https://*.googleapis.com https://*.cloudflare.com data: blob:;media-src *;img-src 'self' http://192.168.1.157 https://*.gstatic.com https://*.googleapis.com data: content:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
                <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
                <link rel="stylesheet" href="css/rtl.jquery.mobile-1.4.5.css" />
                <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" />  
            <body>
                <div id="markerListPage" data-role="page"> </div>
            <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
            <script src="js/rtl.jquery.mobile-1.4.5.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script>
            <script src="js/markerdetails.js"></script>

            </body> 
        </html>

//标记详细信息html

 <!DOCTYPE HTML>
    <html>
      <body>
            <div id="detailsPage" data-role="page">

                        <div data-role="content" id="pic">
                            <div class="flexslider" >
                                <ul class="slides">

                                </ul>
                            </div>
                      </div>    
           </div>
   </body>
  </html>

// javascript of detailsmarker page

$('#detailsPage').live('pageshow', function (event) {
    var id = getUrlVars()["L_ID"];
    var serviceURL = "http://192.168.1.157/maleem/";
    $.getJSON(serviceURL + 'getimage.php?L_ID=' + id, displayImg);  
});

function displayImg(data) {

    var imgs = data.pics;
    console.log(imgs);

    for(var j=0;j<imgs.length;j++)
    {
        $('.slides').append('<li><img  src="' + imgs[j].img + '" width="200" height="200"/></li>'); 
    }

    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: true
    });
}

0 个答案:

没有答案