Question

我通过json / ajax将图像拉入文档。在他们被吸引之后，我想使用插件“PhotoSwipe”创建幻灯片。所有代码都在我的文档中，我可以看到图像被拉，但我认为这是在PhotoSwipe试图调用它们之后。我收到以下错误：

Code.PhotoSwipe.createInstance：没有要传递的图片。

然后就是我的功能记录的所有图像。这是我的代码，如果有人可以提供帮助，我们将不胜感激！

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

          <title></title>

           <link type="text/css" rel="stylesheet" href="styles/iphone.css" /> 
          <link type="text/css" rel="stylesheet" href="styles/slideshow.css" /> 

          <meta name = "viewport" content = "width = 320, user-scalable = no">

              <script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
              <script src="scripts/retina.js" type="text/javascript"></script> 
              <script type="text/javascript" src="scripts/phonegap.js"></script>





            <script type="text/javascript">
                $(document).ready(function() { 
                                  $('img').retina(); 
                                  }); 

                $.ajax({
                       url: "http://www.lcbcchurch.com/mobileJSON/homeslideshow",
                       dataType: "json",
                       success:function(data){
                       results(data);
                       }
                       });

                function results(data) {
                    for(var i = 0; i<data.length;i++){
                        // this will log all of the images url
                        console.log(data[i].slideshow_image); // just access the part you want by it's name.
                        $("#slider").append("<a href='"+data[i].slideshow_image+"'></a>");
                    }
picsReady();
                }
                </script>


            <script type="text/javascript" src="scripts/klass.min.js"></script>
            <script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>


                <script type="text/javascript">
               function picsReady() {
                (function(window, Util, PhotoSwipe){
                 Util.Events.domReady(function(e){
                                      var instance;
                                      instance = PhotoSwipe.attach(
                                            window.document.querySelectorAll('#slider a'),
                                            {
                                            target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
                                            loop: true,
                                            preventHide: true,
                                            autoStartSlideshow: true,
                                            captionAndToolbarHide: true,
                                            margin: 0,
                                            }
                                            );          
                                      instance.show(0);
                                      }, false);
                 }(window, window.Code.Util, window.Code.PhotoSwipe));
 }
                </script>


            </head>

      <body>
      <div class="wrapper">


    <img src="img/Welcome.png" width="280" height="57" class="retina welcome" />
    <div id="PhotoSwipeTarget"></div>

              <div id="slider">

              </div>

    <p>
    LCBC is a group of people on a journey with Jesus. We don’t claim to have it all figured   out   and recognize that each of us is in a different spot on that journey. From those just     exploring Jesus, to those starting to figure out how to walk with Him, to those fully engaged     in that pursuit— everyone is welcome here!

    </p>    
    </div>

      </body>
    </html>

Answer 1

您可能想要检查事情是如何被解雇的......从您的图像加载到准备就绪的功能看起来如此，但滑动也是如此，因此滑动功能不知道自那以后有图像从技术上讲，它与图像同时被调用。

尝试添加一个功能，可以在您的照片加载后调用滑动来启动...

图片在通话后被解析

1 个答案: