0

Eu tenho o seguinte problema: estou a criar um site E-Commerce e tenho uma página para mostrar todos os produtos. A parte de mostrar esta boa, o problema é que, sendo muitos produtos queria criar um botão do género do Twitter, ou seja, para mostrar mais produtos e sempre que chega-se ao fundo da página mostra-se mais.

Tenho o seguinte codigo html e php para mostrar as imagens que, vai buscar à base de dados a path da imagem que está guardada numa pasta:

<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>

Estava a usar o seguinte código javascript para mostar somente as 4 primeiras e depois o resto, mas não funciona:

<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>

1 Resposta 1

0

tudo bom. Então desta forma não é muito bom para você executar não. A melhor forma é você usar offset. O offset você delimita uma quantidade a ser exibida por página, exemplo 10 a cada pagina e sua query vai exibir de 10 em 10.

Por que usar o offset? - Se você tiver 1 milhão de imagens a ser exibida o seu banco vai consumir esses 1 milhão de imagens e vai esconder o restante e isso vai demorar muito tempo, já com offset você so exibe aquela quantidade por demanda.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .