0
I have the following problem: I am creating a website E-commerce and I have a page to show you all the products. The part of showing this good, the problem is that, being many products wanted to create a button like the Twitter, that is, to show more products and whenever you reach the bottom of the page shows more.
I have the following code html e php to display the images that, fetches from the path 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 four and then the rest, but it doesn’t 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>