調用後得到的圖像解析

我通過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>

來源

2012-02-17 nate8684

你可能要檢查從它看起來像你的圖片加載上的準備功能，但這樣是刷卡的，所以刷卡功能，不知道有事情是如何被解僱......因爲從技術上講，它與圖像同時被調用。

嘗試添加調用輕掃你的照片已經被加載後啓動的功能...

來源

2012-02-17 20:11:51

嘿德魯 - 感謝再回答我的問題。「功能結果（數據）」關閉後，我嘗試添加一個函數調用。然後我把這個函數放在我的整個腳本的第二部分。這是我添加電話的方式：「picsReady（）;」＆函數「function picsReady（）{script};」。難道我做錯了什麼？看起來我的第二部分腳本甚至沒有被調用。再次感謝你的幫助！ – nate8684 2012-02-17 21:04:49

嘗試在for循環之後添加picsReady（）函數，所以它仍然在結果函數中...給出一個鏡頭，看看它是否有效！ – 2012-02-17 21:20:57

我更新了上面的代碼，告訴你我在做什麼。由於某種原因，仍然不工作。沒有得到任何錯誤。控制檯顯示圖像正在被拉動，但幻燈片不顯示圖像。我仍然認爲這些圖片在幻燈片插件之後被拉上了。 – nate8684 2012-02-20 15:32:54

調用後得到的圖像解析

回答

相關問題