在初始化之前不能调用同位素的方法;试图调用方法'插入'

时间:2014-04-09 07:21:03

标签: jquery-isotope

我收到此错误,我正在尝试在点击按钮上加载更多帖子

jQuery.fn.more_post_addon = function(addon_options) {

//Set Variables
var addon_el = $(this),
    addon_base = this,
    img_count = addon_options.items.length,
    img_per_load = addon_options.load_count,
    $newEls = '',
    loaded_object = '',
    $container = $('.blog-callout');

$('.more-post-button').click(function(){

    $newEls = '';
    loaded_object = '';                                    
    loaded_images = $container.find('.added').size();


    if ((img_count - loaded_images) > img_per_load) {
        now_load = img_per_load;
    } else {
        now_load = img_count - loaded_images;
    }

    if ((loaded_images + now_load) == img_count) $(this).fadeOut();

    if (loaded_images < 1) {
        i_start = 1;
    } else {
        i_start = loaded_images+1;
    }

    if (now_load > 0) {
        if (addon_options.type == 0) {
            //1 Column Portfolio Type
            for (i = i_start-1; i < i_start+now_load-1; i++) {
                loaded_object = loaded_object + '<div>TEST</div>';
            }
        } else {
            //2-4 Columns Portfolio Type
            for (i = i_start-1; i < i_start+now_load-1; i++) {
                loaded_object = loaded_object + '<div data-category="'+ addon_options.items[i].category +'" class="'+ addon_options.items[i].category +' element added"><div class="filter_img"><a href="'+ addon_options.items[i].url +'"><img src="'+ addon_options.items[i].src +'" alt="" width="570" height="400"><span class="post_type post_type_'+ addon_options.items[i].post_type +'"></span><div class="portfolio_dscr"><div class="wrap_padding">'+ addon_options.items[i].description +'</div></div></a></div></div>';             
            }
        }
        $newEls = $(loaded_object);
        $container.isotope('insert', $newEls, function() {
            $container.isotope('reLayout');
                $('.blog-discription').each(function(){
                    $(this).css('bottom', -($(this).height()+70)+'px'); 
                });
        });         
    }
});
}

php文件是

        <div  data-category="portraits" class="blog-wrapper blog-module <?php if($i%2==0){ echo "first_div"; }?>">
          <h3><?php echo $recent["post_title"]; ?></h3>
          <div class="blog-image"><a href="<?php echo get_permalink($recent["ID"])?>"><?php echo get_the_post_thumbnail($recent["ID"],'full');?></a></div>
          <div class="blog-discription">
            <div><?php echo get_post_meta($recent["ID"],'subtitle',true);?> </div>
            <?php echo limit_words($recent['post_content'],25); ?>.. <a class="read_more" href="<?php echo get_permalink($recent["ID"])?>">Read more.</a> </div>
        </div>

    <?php
    $i++;
    }
     wp_reset_postdata();
    ?>
        <div class="clearfix"></div>
        <div ><a href="#insert" class="more-post-button" data-count="1">LOAD</a></div>
     <script>
        items_set = [{src : 'http://121.243.211.187/wordpress/watervue/wp-content/uploads/2014/04/blog_02.jpg', url : 'http://121.243.211.187/wordpress/watervue/wp-content/uploads/2014/04/blog_02.jpg', post_type : 'image', title : 'test', description: 'descriotion here'},
            {src : 'http://121.243.211.187/wordpress/watervue/wp-content/uploads/2014/04/blog_02.jpg', url : 'http://121.243.211.187/wordpress/watervue/wp-content/uploads/2014/04/blog_02.jpg', post_type : 'image', title : 'test', description: 'descriotion here'}      
        ];
        $('#list').more_post_addon({
        type : 0,
        load_count : 1,
        items : items_set
        });
    </script>
      </div>

1 个答案:

答案 0 :(得分:0)

您需要初始化同位素,然后才能调用其任何方法,例如:

$container = $('.blog-callout');

$container.isotope({
    itemSelector: '.item',
}, function($items) {
    // Callback from initialization
    $newEls = $("<div></div>");
    $container.isotope('insert', $newEls, function() {
        // Callback from insert
    });         
});