동적으로로드 된 이미지가있는 jQuery galleria 플러그인

Question

jQuery와 함께 Galleria 플러그인을 사용하여 이미지 갤러리를 만듭니다. 나는 사용자의 선택에서 동적으로로드 이미지를 DOM에 넣으려고하고 갤러리를 자동 업데이트하여 새 이미지를 표시하려고하지만 작동하지 않습니다.

방화 광은 이미지가 DOM에 성공적으로로드되었지만 Galleria는 미리보기 이미지를 표시하지 않음을 보여줍니다. 새 이미지를 표시하려면 Galleria를 다시로드하는 방법이 필요합니다.

/* ---- Gallery Code ---- */ 
if ($(this).find('div').attr('title') == 'photogallery' && $('.galleria_container').length == 0) 
{ 
    $('.gallery').galleria(
    { 
     history : false, 
     clickNext : true, 
     onImage : function(image,caption,thumb) 
     { 
     if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1)) 
     { 
      image.css('display','none').fadeIn(1000); 
     } 

     var _li = thumb.parents('li'); 

     caption.css('display','none').fadeIn(1000); 
     _li.siblings().children('img.selected').fadeTo(500,0.3); 
     thumb.fadeTo('fast',1).addClass('selected'); 
     image.attr('title','Next image >>'); 
     }, 
     onThumb : function(thumb) 
     { 
     var _li = thumb.parents('li'); 
     var _fadeTo = _li.is('.active') ? '1' : '0.3'; 

     thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500); 
     thumb.hover 
     (
      function() { thumb.fadeTo('fast',1); }, 
      function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active 
     ) 
    } 
    }); 
} 

/* ---- Gallery Selector ---- */ 
$(document).ready(function() 
{ 
    var galleryImages = new Object(); 

    <?php 
    echo $myGal; 
    ?> 

    function setImages(type) 
    { 
     var image = ''; 

     for (var i = 0; i < galleryImages[type].length; i++) 
     { 
     image += '<li><img src="' + galleryImages[type][i] + '"></li>'; 
     } 

     $('ul.gallery').html(image); 
    } 

    $('ul.menu-horiz li ul li').click(function() 
    { 
     setImages($(this).attr('rel')); 
    }); 
}); 

표시되는 PHP 코드는 이미지 배열을 생성합니다.

제 질문에 대한 요약 : 새로운 이미지가 DOM에로드되면 어떻게하면 Galleria를 다시로드 할 수 있습니까?

Answer 1

LiveQuery plugin을 참조하십시오. 그것은 DOM이 변경 되더라도 발동하는 방식으로 함수를 요소에 바인딩합니다.