jQuery Создание масонства Ajax вызывает класс кирпичной кладки

Question

Я использую плагин jQuery masonry, и у меня возникла проблема, когда я делаю вызов ajax на другой странице для загрузки изображений для галереи. Вызов ajax работает, и изображения загружаются, но когда вызов выполняется, происходит что-то, что удаляет один из классов, который Masonry добавляет тоже один из моих div.

Вот как выглядит мой html на первой странице. Здесь все хорошо и показывает кирпичную кладку класса, в которой мне нужно отобразить соответствующий css, чтобы все выглядело красиво, а также отображает встроенный css.

<a href="/system/images/series_uploads/15/original/berkshire_25585_walnut_famousdaves03.jpg?1330115640" rel="lightbox['gallery']"> 
    **<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">**<img alt="" src="/system/images/series_uploads/15/gallery/berkshire_25585_walnut_famousdaves03.jpg?1330115640" title="Berkshire" /> 
    <div class="gallery-text"> 
     <h3>Berkshire</h3> 
     <p>HDP &ndash; High Definition Porcelain</p> 
    </div> 
    </div> 
    </a> 

Когда я нажимаю на ссылку, чтобы сделать вызов Ajax, образы загрузки в тонкой и она работает на всех звеньях, но класс кладки кирпича удаляется и изображения теряют CSS.

jQuery("#project-galleries-navigation li.load-category a").on("click", function(){  
    var href = jQuery(this).attr("href"); 
      jQuery("#gallery").fadeOut(300).remove("img").load(href).fadeIn(2300);  
     return false;   
    }); 

Это код, который я использую для кладки.

var $container = jQuery('#copy-wrapper-gallery'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.item', 
    isAnimated: true    
    }); 
});  

Это то, что заканчивается тем, что происходит с моим html, когда страница загружается в новые данные. Классовый кирпич класса больше не присутствует, а встроенный css также исчезает.

<a href="/system/images/series_uploads/7/original/ashton_23931_smokey_beige_.jpg?1330114250" rel="lightbox['gallery']"> 
    **<div class="item">**<img alt="" src="/system/images/series_uploads/7/gallery/ashton_23931_smokey_beige_.jpg?1330114250" title="Ashton" /> 
    <div class="gallery-text"> 
     <h3>Ashton</h3> 
     <p>Porcelain</p> 
    </div> 
    </div> 
    </a> 

У кого-нибудь была эта проблема или у вас есть возможность исправить эту проблему?

Answer 1

Мне удалось заставить его работать, изменив этот jquery и включив в него функцию обратного вызова.

  jQuery("#gallery").fadeOut(300).remove("img").load(href, function(){ 
        jQuery("#gallery").masonry("reload"); 
       }).fadeIn(2300);  
       e.preventDefault();      
     });