2

我正在通过 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>
4

1 回答 1

0

您可能想检查事情是如何被触发的......从您的图像加载到就绪功能上的样子来看，但是滑动也是如此，因此滑动功能不知道那里有图像，因为从技术上讲它是与图像同时调用。

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

于 2012-02-17T20:11:51.650 回答