<title>Gallery | The Service Men</title>
<meta name="Gallery | The Service Men" content="Free Web tutorials">
<?php include 'headtags.php';?>
<?php include 'header.php';?>
<style>
    .gallery-head h1
    {
        margin-top:200px;
    }
    .portfolio-menu{
  text-align:center;
}
.portfolio-menu ul li{
  display:inline-block;
  margin:0;
  list-style:none;
  padding:10px 15px;
  cursor:pointer;
  -webkit-transition:all 05s ease;
  -moz-transition:all 05s ease;
  -ms-transition:all 05s ease;
  -o-transition:all 05s ease;
  transition:all .5s ease;
}

.portfolio-item{
  /*width:100%;*/
}
.portfolio-item .item{
  /*width:303px;*/
  float:left;
  margin-bottom:10px;
}
.image img
{
  width: 300px;
  height: 200px;
  transition: 0.5s all ease-in-out;
}
.image img:hover
{
  transform: scale(1.1);
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include the above in your HEAD tag -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

<div style="background-color:black; height:300px;" class="container-fluid">
   <div class="row">
       <div class="gallery-head text-center text-white">
           <h1>Gallery</h1>
       </div>
   </div>
</div>

 <div class="container p-5 mt-5">
         <div class="row">
            
         </div>
      <!--    <div class="portfolio-menu mt-2 mb-4">
            <ul>
               <li class="btn btn-outline-dark active" data-filter="*">All</li>
               <li class="btn btn-outline-dark" data-filter=".gts">Girls T-shirt</li>
               <li class="btn btn-outline-dark" data-filter=".lap">Laptops</li>
               <li class="btn btn-outline-dark text" data-filter=".selfie">selfie</li>
            </ul>
         </div> -->
         <div class="portfolio-item row">
                  <?php
include 'admin/config.php';
 $sql = "SELECT * FROM tb9_gallery_photo";
 $run = mysqli_query($db,$sql);
 while($data = mysqli_fetch_assoc($run)){
 ?>

            <div class="item selfie col-lg-3 col-md-4 col-6 col-sm">
               <a href="admin/img/services/<?php echo $data['image']?>" class="fancylight image popup-btn" data-fancybox-group="light"> 
               <img class="img-fluid" src="admin/img/services/<?php echo $data['image']?>" alt="">
               </a>
            </div>
            <?php
              }
            ?>
            
         </div>
      </div>
      <script type="text/javascript">
          // $('.portfolio-item').isotope({
        //    itemSelector: '.item',
        //    layoutMode: 'fitRows'
        //  });
         $('.portfolio-menu ul li').click(function(){
          $('.portfolio-menu ul li').removeClass('active');
          $(this).addClass('active');
          
          var selector = $(this).attr('data-filter');
          $('.portfolio-item').isotope({
            filter:selector
          });
          return  false;
         });
         $(document).ready(function() {
         var popup_btn = $('.popup-btn');
         popup_btn.magnificPopup({
         type : 'image',
         gallery : {
          enabled : true
         }
         });
         });
</script>


<?php include 'footer.php';?>