2012-01-30 6 views
-1

div의 이미지를 표시하기 위해 jQuery 플러그인 (http://tympanus.net/codrops/2011/08/30/automatic-image-montage/)을 사용합니다. 그것은 잘 작동합니다. 그러나. 아약스로이 div에 새로운 이미지를로드 할 때 아무 것도하지 않습니다. (죄송합니다, 나는 그것을 잊어) 여기 ajax에서이 스크립트를 작동시키는 방법은 무엇입니까?

(function(window, $, undefined) { 

내 아약스 호출입니다 :

나는 문제가 여기에있다 생각

$('#albums').live('click', function() { 
$('#left_col div').hide(); 
$.ajax({ 
    url: document.base_url + 'welcome/list_albums', 
    success: function(data) { 
     $('#thumbs, #images').html(''); 
     $('#glist').html(data).show(); 

     var $container = $('#glist'), 
      $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({ 
          fillLastRow        : true, 
          alternateHeight     : true, 
          alternateHeightRange : { 
            min  : 70, 
            max  : 140 
          } 
        }); 

        /* 
        * just for this demo: 
        */ 
        $('#overlay').fadeIn(500); 
      } 
     }).attr('src',$img.attr('src')); 
     });  
    } 
}); 
return false;  

});

내 질문은 : 어떻게 내가이 스크립트를 다시로드하거나 어떻게 든 아약스와 함께 사용할 수 있습니다.

+0

서버의 응답을 표시하십시오 ... – TOUDIdel

+1

코드하시기 바랍니다! – gdoron

+0

코드를보아야합니다. 플러그인을 초기화하는 코드와 AJAX 요청을 수행하는 코드. – Jasper

답변

0

정확히 원하는 것을 보여주는 플러그인 예제 페이지에는 "예제 4"가 있습니다. 다음 코드 그래서 본질적으로는 새로운 (고정) 이미지로 캐릭터를 생성

$('#loadmore').show().bind('click', function() { 
    var len = imgarr.length; 
    for(var i = 0, newimgs = ''; i < 15; ++i) { 
     var pos = Math.floor(Math.random() * len), 
     src = imgarr[pos]; 
     newimgs += '<a href=""><img src="images/' + src + '.jpg"/></a>'; 
    } 
    var $newimages = $(newimgs); 
    $newimages.imagesLoaded(function(){ 
     $container.append($newimages).montage('add', $newimages); 
    }); 
}); 

을 실행하는 "로드보다"버튼이 있습니다, JQuery와 객체로이 캐릭터를 래핑하고 할 때 이미지에 대한 콜백을 구현 문자열 내부가로드되었습니다. 로드 된 후에는 'add'매개 변수로 .montage()를 호출하고 두 번째 매개 변수로 jQuery 객체를 호출해야합니다.

+0

Yeap, 이걸 봤어.하지만 내가 필요한 건 아니야. 새 이미지로 div를 채우고이 플러그인을 사용하고 싶습니다. 당신의 대답은 Thx. –

+0

Ahem,하지만 imagesLoaded() 콜백 내의 코드 줄은 정확하게이 작업을 수행하고 있습니다. $ 컨테이너에 새 이미지를 채운 다음 플러그인을 사용하십시오. 나는 다른 (쉬운) 방법이 있다고 생각하지 않는다. – devnull69

관련 문제