使用自動圖片蒙太奇的jQuery AJAX

Question

我使用這裏找到自動圖像蒙太奇插件：

http://tympanus.net/Development/AutomaticImageMontage/index4.html

我使用jQuery在一個點擊按鈕打電話給我更多的圖像。

<div id="montage_overlay" class="paddingspacer2"> 
       <div class="am-container" id="am-container"> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_181.jpg" rel="galleryfacebox" title="'92 Bison Alumni"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_181.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_183.jpg" rel="galleryfacebox" title="Bison Alumni Honored"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_183.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_185.jpg" rel="galleryfacebox" title="Yuker at Bubba's"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_185.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_186.jpg" rel="galleryfacebox" title="Home Team for 3"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_186.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_188.jpg" rel="galleryfacebox" title="...the crowd gets the skinny on W&J"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_188.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_189.jpg" rel="galleryfacebox" title="Bison Finish Regular Season in Strong Fashion"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_189.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_190.jpg" rel="galleryfacebox" title="...a long weekend in b-town"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_190.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02282008_192.jpg" rel="galleryfacebox" title="Bison Baller #1"><img src="http://mediastorage.playerspace.com/photo/groups/6_02282008_192.jpg"></img></a> 

       </div> 
       <div id="loadmore2" class="siteusemorebox"> 
        <a href="#" class="loadmore" id="2">View more media</a> 
       </div>    
      </div> 

      <div class="clearboth"></div> 
      <script type="text/javascript" src="/scripts/jquery/plugins/montage/jquery.montage.min.js"></script> 
      <script language="javascript1.1"> 
       window.media_more_script = '/ajax_results.cfm?rpp=6&ajax_type=my_group_photos&eventid=37&media_type=1&myscript=%2Findex%2Ecfm%2Fleague%2F23%2Faction%2Fdashboard%2Fcontent%5Faction%2Fevents%2Feventid%2F37%2Fevent%5Faction%2Fphotos'; 
      </script>      
      <script type="text/javascript"> 
       $(function() { 
        var $container = $('#am-container'), 
         $imgs  = $container.find('img').hide(), 
         totalImgs = $imgs.length, 
         cnt   = 0; 

        $imgs.each(function(i) { 
         var $img = $(this); 
         $('<img/>').load(function() { 
          ++cnt; 
          if(cnt === totalImgs) { 
           $imgs.show(); 
           $container.montage({ 
            minw : 150, 
            alternateHeight : true, 
            alternateHeightRange : { 
             min : 150, 
             max : 350 
            }, 
            margin : 3, 
            fillLastRow : true 
           }); 

           /* 
           * just for this demo: 
           */ 
           $('#montage_overlay').fadeIn(500); 

           $(document).on("click",'.loadmore',function()        
            { 
            var ID = $(this).attr("id"); 
            var myscript3 = window.media_more_script || null;      
            if(ID) 
             { 
             $("#loadmore"+ID).html('<img src="/images/processing.gif" />');     
             $.ajax({ 
             type: "POST", 
             url: myscript3, 
             data: "lastmsg="+ ID, 
             cache: false, 
             success: function(html){$container.append(html).montage('add',html);} 
             }); 
             } 
            else 
             { 
             $(".siteusemorebox").html('No more records.'); 
             }    
            return false; 
           }); 


          } 
         }).attr('src',$img.attr('src')); 
        }); 

       }); 
      </script> 

谷歌瀏覽器返回以下錯誤：

TypeError: Object 
         <a href="http://mediastorage.playerspace.com/photo/groups/6_02282008_192.jpg" rel="galleryfacebox" title="Bison Baller #1"><img src="http://mediastorage.playerspace.com/photo/groups/6_02282008_192.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_190.jpg" rel="galleryfacebox" title="...a long weekend in b-town"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_190.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_189.jpg" rel="galleryfacebox" title="Bison Finish Regular Season in Strong Fashion"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_189.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_188.jpg" rel="galleryfacebox" title="...the crowd gets the skinny on W&J"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_188.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_186.jpg" rel="galleryfacebox" title="Home Team for 3"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_186.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_185.jpg" rel="galleryfacebox" title="Yuker at Bubba's"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_185.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_183.jpg" rel="galleryfacebox" title="Bison Alumni Honored"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_183.jpg"></img></a> 

         <a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_181.jpg" rel="galleryfacebox" title="'92 Bison Alumni"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_181.jpg"></img></a> 
        has no method 'find' [http://halosummerleague.playerspace.com/scripts/jquery/plugins/montage/jquery.montage.min.js:1] 

任何想法？

Answer 1

得到它

<script type="text/javascript"> 
     $(function() { 
      var $container = $('##am-container'), 
       $imgs  = $container.find('img').hide(), 
       totalImgs = $imgs.length, 
       cnt   = 0; 

      $imgs.each(function(i) { 
       var $img = $(this); 
       $('<img/>').load(function() { 
        ++cnt; 
        if(cnt === totalImgs) { 
         $imgs.show(); 
         $container.montage({ 
          minw : 150, 
          alternateHeight : true, 
          alternateHeightRange : { 
           min : 150, 
           max : 350 
          }, 
          margin : 3, 
          fillLastRow : true 
         }); 
         $('##montage_overlay').fadeIn(500);        
         $(document).on("click",'.loadmore',function()        
          { 
          var ID = $(this).attr("id"); 
          var myscript3 = window.media_more_script || null;      
          if(ID) 
           { 
            $("##loadmore"+ID).html('<img src="/images/processing.gif" />');      
            $.ajax 
             ({ 
              type: "POST", 
              url: myscript3, 
              data: "lastmsg="+ ID, 
              cache: false, 
              success: function(html){ 

               var $newimages = $(html); 
               $newimages.imagesLoaded(function(){ 
               $container.append($newimages).montage('add', $newimages); 
               $("##loadmore"+ID).remove(); 
               });             
              } 
             }); 
           } 
          else 
           { 
            $(".siteusemorebox").html('No more records.'); 
            $("##loadmore"+ID).remove(); 
           }    
          return false; 
         });     
        } 
       }).attr('src',$img.attr('src')); 
      }); 

     }); 
    </script>