Gajabwap Web In Hindi



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