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>