使用Swipe插件的JQuery同位素 - 问题重新加载元素

Question

我正在为照片库使用jQuery Isotope和Swipe插件。我想在关闭画廊时重新加载所有项目滑动但是有问题。所有项目都没有很好地重新加载，当我尝试选择一个新类别的项目时，他们只是远离其他项目。我尝试了很多东西，比如同位素（'reloadItems'），同位素（'reLayout'）但没有成功。 我不知道问题出在哪里。 这个页面会告诉你我的意思：http://digitale-photographie.fr/portfolio.php

此外，代码示例：

portfolio.php

        <div id="sort">
            <a href="#" class="selected" data-filter="*">Tous</a>
            <a href="#" data-filter=".Soirée">Soirée</a>
            <a href="#" data-filter=".Mariage">Mariage</a>
            <a href="#" data-filter=".Portrait">Portrait</a>
            <a href="#" data-filter=".Grossesse">Grossesse</a>
            <a href="#" data-filter=".Publicité">Publicité</a>
            <a href="#" data-filter=".Industrielle">Industrie</a>
        </div>
        <div id="photogrid">
            <?php               
                for ($j=0;$j<=$i-1;$j++)
                {
                    $image_mini = '<img src="photos/portfolio/thumbnails/'.$tab_image_mini[$j].'" />';
                    echo '<div class="thumbnail '.$tab_class[$j].'" data-background="photo.image.large"><a class="thumb">'.$image_mini.'</a></div>';      
                }
            ?>
        </div>
        <div id="mainimage">
            <div id='photos' class='swipe'>
                <div class='swipe-wrap'>
                <?php       
                    for ($j=0;$j<=$i-1;$j++)
                    {
                    echo '<div class="img '.$tab_class[$j].'" data-image="photos/portfolio/zoom/'.$tab_image_zoom[$j].'" data-width="1024" data-height="702">
                            <div class="ui photoinfo hidden">
                                <!-- Photo Title & Description -->
                                <h2 class="phototitle">Runaway...</h2>
                                <!-- Metadata -->
                                <ul class="metadata"></ul>
                            </div>
                        </div>';      
                    }
                ?>
                </div>  
            </div>                      
            <div class="ui button backbutton hidden">
                <div class="chevron">
                    <div class="upper"></div>
                    <div class="lower"></div>
                </div>
                <p>Retourner à la galerie</p>
            </div>
            <div class="ui photonav button prev hidden">
                <div class="chevron">
                    <div class="upper"></div>
                    <div class="lower"></div>
                </div>
            </div>
            <div class="ui photonav button next hidden">
                <div class="chevron">
                    <div class="upper"></div>
                    <div class="lower"></div>
                </div>
            </div>
        </div>

js代码

$(document).ready(function() {
$(window).load(function(){ 
    var $container = $('#photogrid');
    $container.isotope({ 
        filter: '*', 
        animationOptions: { 
            duration: 750, 
            easing: 'linear', 
            queue: false, 
        } 
    }); 

    $('#sort a').click(function(){ 
        var selector = $(this).attr('data-filter'); 
        /*$('.img').isotope({
            filter: selector, 
            animationOptions: { 
                duration: 750, 
                easing: 'linear', 
                queue: false, 
            }           
        });*/
        $container.isotope({ 
            filter: selector, 
            animationOptions: { 
                duration: 750, 
                easing: 'linear', 
                queue: false, 
            } 
        }); 
        return false; 
    });   
});

// hide photo view with back button
$('.backbutton').click(function() {
    // Hide photo layer and current photo
    mainimageElement.removeClass('visible black');
    $('.ui').addClass('hidden');
    if (isTouchDevice()) {
        headerElement.removeClass('hidden');
    }

    $('#photogrid').isotope( 'reloadItems' ).isotope();

    mainimageElement.removeAttr('style');
    thumbnailElements.removeAttr('style');
    sortElement.removeAttr('style');
    headerElement.removeClass('opaque');
    setHeaderOpacity();

    // put selected thumbnail back in its place
    retractThumbnail(selectedThumbnail);
    retractThumbnail(selectedSort);

    setTimeout(function() {
        // animate in other thumbnails
        var delay = 0;      
        thumbnailElements.each(function() {
            delay = delay + 10;
            var $this = $(this);
            setTimeout(function() {
                $this.removeClass('background');
            }, delay);
        });
    }, 1)

});

感谢您的帮助：）