Не работает кнопка load more, точнее не могу понять как выставить количество товара на странице, публикую 5 товаров, кнопка остается под товарами, 50 товаров - тоже самое. Нужно выставить значение 8 товаров на странице, что бы все последующие были под кнопкой. подскажите где это можно указать.
Style.css:

.load_more_posts a, .load_more_portfolio a {
border: 2px solid #E2E2E2;
color: #E2E2E2;
font-size: 25px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-radius: 4px;
padding: 4px 30px;
cursor: pointer;
}
.load_more_posts a:hover, .load_more_portfolio a:hover {
border: 2px solid #1DC6DE;
color: #1DC6DE;
-----------------
custon.js:

// Example Load Items
$('.load_more_posts').append('Нет данных');
$( ".load_more_posts a" ).removeAttr('href').click(function() {
jQuery('.load_more_posts a').fadeOut( 200 );
jQuery('.load_more_posts img').delay( 200 ).fadeIn( 1000 );
jQuery('.load_more_posts img').delay( 3000 ).fadeOut( 1000 );
jQuery('.load_more_posts h4').delay( 5200 ).fadeIn( 1000 );
});
$('.load_more_portfolio').append('Нет данных');
$( ".load_more_portfolio a" ).removeAttr('href').click(function() {
jQuery('.load_more_portfolio a').fadeOut( 200 );
jQuery('.load_more_portfolio img').delay( 200 ).fadeIn( 1000 );
jQuery('.load_more_portfolio img').delay( 3000 ).fadeOut( 1000 );
jQuery('.load_more_portfolio h4').delay( 5200 ).fadeIn( 1000 );
-------------------
index.html (товар выглядит так, это один из 50 товаров, нужно что бы на странице было только 8, остальное под загрузкой)

<div class="page-content">

<div class="row clearfix">
<div class="section" id="works">
<div class="title mbf">
<h3> Товары </h3>
<div class="filters">
<ul>
<li class="filter" data-filter="all">Все</li>
<li class="filter" data-filter="web_design">Оборудование</li>
<li class="filter" data-filter="sir">Сырье</li>
<li class="filter" data-filter="icons">Электроника</li>
<li class="filter" data-filter="textil">Текстиль</li>
<li class="filter" data-filter="photos">Розница</li>
</ul>
</div><!-- /filters -->
</div><!-- /title -->

<ul id="my_gallery" class="og-grid">

<li class="mix sir">
<a href="images/assets/333.jpg" data-gal="lightbox[folio]"><img src="images/assets/333.jpg" alt=""></a>
<div class="overlay">
<p> Электроды данного типа делаются из кокса специального состава или прессованного угла. Длинна электродов 200-300мм, диаметр от 5-и до 30-и мм., округлое сечение. </p>
</div><!-- /overlay -->
<div class="meta_work">
<a class="w_title" href="electrod.html"> Угольный электрод </a>
<div class="meta">
<span> <a href="#"> Сырье </a> </span>
</div><!-- /meta -->
</div><!-- /meta work -->
</li><!-- /item -->
<!-- /dont remove this line --><li class="gap"></li>
</ul><!-- /my gallery -->

<div class="tac blocker_w clearfix">
<div class="load_more_portfolio"><a href="#"><i class="fa fa-chevron-down"></i></a></div><!-- /load more -->
</div><!-- /tac -->
</div><!-- /section portfolio -->
</div><!-- /row -->