Javascript - Use button to show more images

I have the following problem: I am creating an E-Commerce site and I have a page to show all products. The part of showing this good, the problem is that being many products wanted to create a button like Twitter , that is, to show more products and whenever you get to the bottom of the page shows up more.

I have the following code html e php to show the images that will fetch from the database the path of the image that is stored in a folder:

<div class="container">
<div class="blog">
    <div class="blog-grids">
        <div class="blog-grids-box">
            <div class="row">
                <?php
                $getProducts = mysqli_query($dbc,"Select * From products Order By id_product DESC") or die(mysqli_error($dbc));

                while($row = mysqli_fetch_array($getProducts)){
                $idProd = $row["id_product"];
                $name = $row["name_Product"];
                $price = $row["prod_price"];
                $description = $row["prod_description"];
                $idImage = $row["img_id"];
                ?>
                <div class="col-sm-4 col-md-2">
                    <div class="blog-grid">
                        <div class="blog-poast-head">
                            <?php
                            $files = array();
                            $folder = "Products/";
                            if (is_dir($folder)) {
                                if ($handle = opendir($folder)) {
                                    while (($file = readdir($handle)) != False) {
                                        if ($file == '.' || $file === '..') continue;
                                        $files[] = $file;
                                        sort($files);
                                    }
                                    closedir($handle);
                                }
                            }
                            $error = array_filter($files);
                            if (!empty($error)) {
                                $getImage = mysqli_query($dbc,"Select * From images Where img_id ='$idImage' ") or die(mysqli_error($dbc));
                                while($rowI = mysqli_fetch_array($getImage)){
                                    $imgId = $rowI["img_id"];
                                    $imgPath = $rowI["img_path"];
                                    $imgName = $rowI["img_name"];
                             ?>
                            <div class="blog-art-pic">
                                <a class="post-pic" href="<?php echo $imgPath ?>" rel="lightbox"><img class="img-responsive" src="<?php echo $imgPath ?>" title="<?php $imgName ?>" style="height: 150px;"/></a>
                            </div>

                            <?php
                            }
                            }
                            ?>
                            <div class="blog-poast-info">
                                <ul>
                                    <li><a class="admin" href="#"><span> </span> Admin </a></li>
                                    <li><a class="p-date" href="#"><span> </span>4-03-2014 </a></li>
                                    <li><a class="p-blog" href="#"><span> </span>Blog,News</a></li>
                                    <div class="clear"></div>
                                </ul>
                            </div>
                        </div>
                        <div class="blog-info">
                            <h3><a href="#">Lorem Ipsum is typesetting industry.</a></h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. commodo consequat. Duis aute irure
                                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                                pariatur.</p>
                            <a class="btn" href="details.html">Details</a>
                        </div>
                    </div>
                </div>
                <?php
                }
                ?>
                <script type="text/javascript">
                    $(function()
                    {
                        $("[rel='lightbox']").lightbox();
                    });
                </script>
                <div class="clear"></div>
            </div>
            <div class="criuse-grid-load">
                <a href="javascript:void(0)" id="loadMore">Loading More</a>
            </div>
        </div>
    </div>
    <!----//End-Blog---->
</div>

I was using the following code javascript to show only the first 4 and then the rest, but it does not work:

<script type="text/javascript">
                                $(document).ready(function () {
                                    size_li = $(".blog-grid").size();
                                    x=4;
                                    $('.blog-grid:lt('+x+')').show();
                                    $('#loadMore').click(function () {
                                        x= (x+4 <= size_li) ? x+4 : size_li;
                                        $('.blog-grid:lt('+x+')').show();
                                    });

                                });
                            </script>