<?php
$page = 3; 
?>
<!doctype html>
<html lang="en">
  <head>
    <title>Alhaji Dramani Motors | Gallery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <link rel="stylesheet" href="css/jquery.fancybox.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="shortcut icon" type="image/png" href="images/icon.png">

    <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
    <link rel="stylesheet" href="lib/fontawesome/css/all.css">
    

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/self.css">
    
  </head>
  <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
    <style>
        .gallery-section{width:300px; height:300px; overflow: hidden; position: relative; cursor: pointer;}
        .gallery-section i{position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:white; z-index: 1000; display:none;}
        .gallery-section img{width:100%; height:100%; object-fit:cover; transition:0.5s;}
        .gallery-section:hover {img{transform:scale(1.2,1.2); filter:brightness(70%)}; i{display:block;}}
        .gallery-body{ height:600px;}
        .gallery-body img{width:100%; height:100%; object-fit:cover;}
        
    </style>

    <script>
        function showPic(source){
           var src = source.querySelector('img').src
            $('#gallery-modal').show();
            $('#modal-img').attr('src',src);
        }
    </script>
  
  <div class="custom-modal" id="gallery-modal">
        <div class="custom-modal-body gallery-body bg-light text-center cornered">
            <img src="images/contact.jpg"  id="modal-img"> <br><br>
            <div class="btn btn-small btn-primary" onclick="$('#gallery-modal').hide();"><i class="fa fa-times"></i></div>
        </div>
    </div>


  <div class="site-wrap">

    <div class="site-mobile-menu site-navbar-target">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>
   
    <?php
      include 'components/nav.php';
    ?>

  
     
   
    <div class="site-blocks-cover overlay" style="background-image: url(images/hero_2.jpg); min-height:40vh;" data-aos="fade" id="home-section">

      <div class="container">
        <div class="row align-items-center justify-content-center">

          
          <div class="col-md-10 mt-lg-5 text-center">
            <div class="">
                <h1 class="" data-aos="fade-up">Our<element style="color:rgb(93, 183, 252)"> Products & Services</element></h1>
                <p class="mb-5 desc" data-aos="fade-up" data-aos-delay="100">We have a range of machinery and it's accessories to pick from</p>

              </div>
          </div>
            
        </div>
      </div>
    </div> 


<section class="site-section" id="gallery-section" data-aos="fade">

      <div class="container">

        <?php

            echo '<div class="row mb-3">

              </div>
              <div class="row justify-content-center" style="gap:10px">
              ';

            $arr = array("images/res/product");
            $format  = ".jpg";

            for($x=0;$x<count($arr);$x++){
                $mm = $arr[$x];

                foreach (glob("$mm/*$format") as $filename) {
                    // echo "$filename size " . filesize($filename) . "<br>";
                    echo '<div class=" gallery-section cornered border" onclick="showPic(this)">
                            <div><i class="fa fa-search"></i></div>
                            <img src="'.$filename.'" >
                        </div>';
                }
            }
            echo ' </div>';
          
        
        ?>

        
      </div>

    </section>

   

  <?php include "components/newsletter.php" ?>

    

    
    <?php include "components/footer.php" ?>

  </div> <!-- .site-wrap -->

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.countdown.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.fancybox.min.js"></script>
  <script src="js/jquery.sticky.js"></script>
  <script src="js/isotope.pkgd.min.js"></script>

  
  <script src="js/main.js"></script>
  <script src="js/self.js"></script>


  
  </body>
</html>