Hello friends ajj me apko btaunga ki kis parkar ham image gallery ,me pagination integrate kar sakte hai.yanha ham php mysql and bootstrap ka use karege image gallery me pagination karne ke liye.
Demo--Image Gallery Pagination with php and mysql
index.php
<h1> Image Pagination With Php & Mysql </h1>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "malala";//enter your databse name here
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$limit = 8;
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;
$sql = "SELECT * FROM demo ORDER BY id ASC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/…/3.3…/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/…/bootstrap.min.js"></script>
<link rel="stylesheet" href="dist/simplePagination.css" />
<script src="dist/jquery.simplePagination.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="dist/simplePagination.css" />
<script src="dist/jquery.simplePagination.js"></script>
<title></title>
<script></script>
<style>
.fixed-height{
max-height:200px;
}
.img-responsive
{
display :inline-block;
}
</style>
</head>
<body>
<div class="row">
<?php
$col = 0;
while ($row = mysqli_fetch_assoc($rs_result)) {
$id=$row['id'];
$name=$row['name'];
$image=$row['post_image'];
$singer=substr($row['singer'],0,5);
$photo=$row['photo'];
$size=$row['size'];
?>
<!-- //
col-sm-3 for 4 Cols in a row
col-sm-4 for 3 Cols in a row
col-sm-6 for 2 cols in a row
-->
<?php if($col%4==0 && $col>0){
echo '</div><div class="row">';
}
?>
<div class="col-sm-3 text-center">
<img src="uploads/<?php echo $photo; ?>" class="img-responsive fixed-height"/>
<?php echo $photo; ?>
<?php echo $size; ?>
</div>
<?php $col++; } /*end while*/?>
</div>
<?php
$sql = "SELECT COUNT(id) FROM demo";
$rs_result = mysqli_query($conn, $sql);
$row = mysqli_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
$pagLink = "<nav><ul class='pagination'>";
for ($i=1; $i<=$total_pages; $i++) {
$pagLink .= "<li><a href='index.php?page=".$i."'>".$i."</a></li>";
};
echo $pagLink . "</ul></nav>";
?>
<script type="text/javascript">
$(document).ready(function(){
$('.pagination').pagination({
items: <?php echo $total_records;?>,
itemsOnPage: <?php echo $limit;?>,
cssStyle: 'light-theme',
currentPage : <?php echo $page;?>,
hrefTextPrefix : 'index.php?page='
});
});
</script>
</body>
</html>
Yanha apko sirf database connection bnanae ke liye databse ka name add karna hai
Aap complete code mini project page se download kar sakte ho
Thank You
Team Gajabwap Web In Hindi
very nice article bro........... this post is very helpful for me. I am fresher always follow your blog to learn something new
ReplyDeletenice post sir...... apki image pagination ka code bhut ache se kam kar raha hai thanks
ReplyDelete