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

画像がonready関数に読み込まれているように見えることから、どのように起動されているかを確認することをお勧めしますが、スワイプも同様であるため、スワイプ関数は技術的には画像が存在することを認識しません。画像と同時に呼び出されます。

写真が読み込まれた後にスワイプを呼び出して開始する関数を追加してみてください...

于 2012-02-17T20:11:51.650 に答える