1#@!#!123s

: / home3 / encodto1 / mtf.encodersunlimited.com /
Filename : Gallery.php
back
<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gallery || Maa Tara Films</title>
  <!-- favicons Icons -->
  <!-- <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png" /> -->
  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon.ico" />
  <link rel="manifest" href="assets/images/favicons/site.webmanifest" />
  <meta name="description" content="Maa Tara Films" />

  <!-- fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com/">

  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap"
    rel="stylesheet">

  <link
    href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

  <link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/vendors/animate/animate.min.css" />
  <link rel="stylesheet" href="assets/vendors/animate/custom-animate.css" />
  <link rel="stylesheet" href="assets/vendors/fontawesome/css/all.min.css" />
  <link rel="stylesheet" href="assets/vendors/jarallax/jarallax.css" />
  <link rel="stylesheet" href="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.css" />
  <link rel="stylesheet" href="assets/vendors/odometer/odometer.min.css" />
  <link rel="stylesheet" href="assets/vendors/swiper/swiper.min.css" />
  <link rel="stylesheet" href="assets/vendors/eston-icons/style.css">
  <link rel="stylesheet" href="assets/vendors/owl-carousel/owl.carousel.min.css" />
  <link rel="stylesheet" href="assets/vendors/owl-carousel/owl.theme.default.min.css" />
  <link rel="stylesheet" href="assets/vendors/bootstrap-select/css/bootstrap-select.min.css" />
  <link rel="stylesheet" href="assets/vendors/jquery-ui/jquery-ui.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet">

  <!-- template styles -->
  <link rel="stylesheet" href="assets/css/eston.css" />
  <link rel="stylesheet" href="assets/css/eston-responsive.css" />


  <style>
    .main {
      padding: 20px;
    }

    .card {
      margin-bottom: 20px;
    }

    .card-image img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }

    .filter-btn {
      margin-right: 10px;
    }

    /* Updated styling for a responsive layout */
    @media (min-width: 576px) {
      .card {
        flex: 0 0 48%;
        /* Adjust as needed for your layout */
      }
    }

    @media (min-width: 768px) {
      .card {
        flex: 0 0 31%;
        /* Adjust as needed for your layout */
      }
    }
  </style>
</head>

<body>



  <!-- <div class="preloader">
    <div class="preloader__image"></div>
  </div> -->
  <!-- /.preloader -->


  <!-- Start sidebar widget content -->
  <div class="xs-sidebar-group info-group info-sidebar">
    <div class="xs-overlay xs-bg-black"></div>
    <div class="xs-sidebar-widget">
      <div class="sidebar-widget-container">
        <div class="widget-heading">
          <a href="#" class="close-side-widget">X</a>
        </div>
        <div class="sidebar-textwidget">
          <div class="sidebar-info-contents">
            <div class="content-inner">
              <div class="logo">
                <a href="index.php"><img src="assets/images/resources/mtforiginal.jpg" alt="" style="height: 100px;" /></a>
              </div>
              <div class="content-box">
                <h4>About Us</h4>
                <p>Maa Tara Films is a dynamic and innovative film production company dedicated to creating compelling and thought-provoking cinema. With a strong focus on storytelling, Maa Tara Films strives to bring unique narratives to the screen that resonate with audiences on a deep and emotional level. The company is known for its commitment to high-quality production values and has successfully produced a diverse range of films across genres. Maa Tara Films is driven by a passion for storytelling and a vision to contribute meaningfully to the world of cinema. As a creative powerhouse, the company continues to push boundaries and redefine the cinematic landscape.</p>
              </div>
              <div class="form-inner">
                <h4>Get a free quote</h4>
                <form action="#" class="contact-form-validated"
                  novalidate="novalidate">
                  <div class="form-group">
                    <input type="text" name="name" placeholder="Name" required="">
                  </div>
                  <div class="form-group">
                    <input type="email" name="email" placeholder="Email" required="">
                  </div>
                  <div class="form-group">
                    <textarea name="message" placeholder="Message..."></textarea>
                  </div>
                  <div class="form-group message-btn">
                    <button type="submit" class="thm-btn form-inner__btn">Submit Now</button>
                  </div>
                </form>
                <div class="result"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End sidebar widget content -->



  <div class="page-wrapper">
    <?php require('header.php') ?>

    <div class="stricky-header stricked-menu main-menu">
      <div class="sticky-header__content"></div><!-- /.sticky-header__content -->
    </div><!-- /.stricky-header -->

    <!--Page Header Start-->
    <section class="page-header">
      <div class="page-header__bg" style="background-image: url(assets/images/backgrounds/page-header-bg.jpg);">
      </div>
      <div class="container">
        <div class="page-header__inner">
          <p>Maa Tara Production</p>
          <h2>MTF GALLERY</h2>
          <div class="thm-breadcrumb__inner">
            <ul class="thm-breadcrumb list-unstyled">
              <li><a href="index.php">Home</a></li>
              <li><span>/</span></li>
              <li>Gallery</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!--Page Header End-->
    <?php
// Include your database connection
include 'config.php';

// Fetch distinct categories from the gallery table
$categoryQuery = "SELECT DISTINCT category FROM gallery";
$categoryResult = mysqli_query($conn, $categoryQuery);

// Fetch gallery data from the gallery table
$query = "SELECT name, category, image FROM gallery";
$result = mysqli_query($conn, $query);
?>

<main class="main">
  <div class="container">
    <div class="col-12">
      <div class="mb-3 d-flex flex-wrap justify-content-center">
        <button class="btn btn-outline-danger filter-btn mb-2 active" data-filter="all">All</button>
        <?php
        // Loop through the distinct categories and create filter buttons
        while ($categoryRow = mysqli_fetch_assoc($categoryResult)) {
          // Replace spaces with hyphens for multi-word categories
          $category = htmlspecialchars(str_replace(' ', '-', $categoryRow['category']));
          echo "<button class='btn btn-outline-danger filter-btn mb-2' data-filter='$category'>" . htmlspecialchars($categoryRow['category']) . "</button>";
        }
        ?>
      </div>
    </div>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
      <?php
      // Loop through the fetched gallery data and display it
      while ($row = mysqli_fetch_assoc($result)) {
        $name = htmlspecialchars($row['name']);
        // Replace spaces with hyphens for multi-word categories
        $category = htmlspecialchars(str_replace(' ', '-', $row['category']));
        $image = htmlspecialchars($row['image']);
      ?>
        <div class="card <?php echo $category; ?>">
          <div class="card-image">
            <a href="mtadminf/uploads/<?php echo $image; ?>" data-fancybox="gallery" data-caption="<?php echo $name; ?>">
              <img src="mtadminf/uploads/<?php echo $image; ?>" alt="<?php echo $name; ?>">
            </a>
          </div>
        </div>
      <?php } ?>
    </div>
  </div>
</main>

<?php
// Close the database connection
mysqli_close($conn);
?>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
  $(document).ready(function() {
    // Filter functionality
    $('.filter-btn').on('click', function() {
      var filterValue = $(this).data('filter');
      if (filterValue === 'all') {
        $('.card').show();
      } else {
        $('.card').hide();
        $('.' + filterValue).show();
      }
    });

    // Fancybox initialization
    $('[data-fancybox="gallery"]').fancybox({
      loop: true
    });
  });
</script>



    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <script>
      $(document).ready(function() {
        // Filter functionality
        $('.filter-btn').on('click', function() {
          var filterValue = $(this).data('filter');
          if (filterValue === 'all') {
            $('.card').show();
          } else {
            $('.card').hide();
            $('.' + filterValue).show();
          }
        });

        // Fancybox initialization
        $('[data-fancybox="gallery"]').fancybox({
          loop: true
        });
      });
    </script>



    <!--News Two End-->

    <!--Site Footer Start-->
    <footer class="site-footer">
      <div class="container">
        <div class="site-footer__top">
          <div class="row">
            <div class="col-xl-2 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="100ms">
              <div class="footer-widget__column footer-widget__about">
                <div class="footer-widget__logo">
                  <a href="index.php"><img src="assets/images/resources/MTF logo.png" alt="" style="height:140px;"></a>
                </div>
                
              </div>
            </div>
            <div class="col-xl-2 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="200ms">
              <div class="footer-widget__column footer-widget__services">
                <div class="footer-widget__title-box">
                  <h3 class="footer-widget__title">Services</h3>
                </div>
                <ul class="footer-widget__services-list list-unstyled">
                  <li><a href="casting.php">Casting</a></li>
                  <li><a href="Event.php">Event</a></li>
                  <li><a href="Danceclass.php">Dance Class</a></li>
                  <li><a href="Rentalstudio.php">Rental Studio</a></li>
                  <li><a href="actingclass.php">Acting Class</a></li>
                  <li><a href="modelling.php">Modelling</a></li>
                </ul>
              </div>
            </div>
            <div class="col-xl-2 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="300ms">
              <div class="footer-widget__column footer-widget__pages">
                <div class="footer-widget__title-box">
                  <h3 class="footer-widget__title">Quick Toggle</h3>
                </div>
                <ul class="footer-widget__services-list list-unstyled">
                  <li><a href="about.php">About us</a></li>
                  <li><a href="ourwork.php">Our Works</a></li>
                  <li><a href="Gallery.php">Gallery</a></li>
                  <li><a href="blog.php">Blog</a></li>

                  <li><a href="contact.php">Contact Us</a></li>
                </ul>
              </div>
            </div>





            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="100ms">
              <div class="footer-widget__column footer-widget__pages">
                <div class="footer-widget__title-box">
                  <h3 class="footer-widget__title">Contact Details</h3>
                </div>
                <p class="footer-widget__about-text">Address: 3rd Renuka Building Ward 46 Champasari Main Road, Champasari More Rd, Opposite Mega Basket, Siliguri, West Bengal 734003</p>
                <div class="footer-widget__contact">
                  <p><a href="mailto:info@mtfproduction.com"><i class="fa-solid fa-envelope" style="color: #646568;"></i> info@mtfproduction.com</a></p>
                  <p><a href="tel:8967287938"> <i class="fa-solid fa-phone" style="color: #646568;"></i> +917908639418</a></p>
                </div>
                <div class="site-footer__social">
                  <a href="https://www.facebook.com/maatarafilmsslg"><i class="fab fa-facebook-f"></i></a>
                  <a href="#"><i class="fab fa-instagram"></i></a>
                  <a href="#"><i class="fab fa-youtube"></i></a>
                  <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
                  <a href="#"><i class="fab fa-linkedin"></i></a>
                  <a href="https://wa.me/+917908639418"><i class="fa-brands fa-whatsapp"></i></a>
                </div>
              </div>
            </div>

            <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="400ms">
              <div class="footer-widget__column footer-widget__gallery">
                
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="footer-bottom">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="copyright-text d-flex justify-content-between  ">
                <span> &copy;<b>2023 Maa Tara Films.</b> All Right Reserved </span> <span>Designed with <i class="fa fa-heart text-danger"></i> &nbsp; by <img src="assets/images/brand/Logo w (1).png" alt="" style="height: 40px;" class="ms-2  img-fluid   "></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!--Site Footer End-->


  </div><!-- /.page-wrapper -->


  <div class="mobile-nav__wrapper">
    <div class="mobile-nav__overlay mobile-nav__toggler"></div>
    <!-- /.mobile-nav__overlay -->
    <div class="mobile-nav__content">
      <span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"></i></span>

      <div class="logo-box">
        <a href="index.php" aria-label="logo image"><img src="assets/images/resources/mtforiginal.jpg" height="70px"
            alt="" /></a>
      </div>
      <!-- /.logo-box -->
      <div class="mobile-nav__container">
      </div>
      <!-- /.mobile-nav__container -->

      <ul class="mobile-nav__contact list-unstyled">
        <li>

          <i class="fa fa-envelope"></i>
          <a href="mailto:info@mtfproduction.com">info@mtfproduction.com</a>
        </li>
        <li>
          <i class="fa fa-phone-alt"></i>
          <a href="tel:+917908639418">+917908639418</a>
        </li>
      </ul><!-- /.mobile-nav__contact -->
      <div class="mobile-nav__top">
        <div class="mobile-nav__social">
          <a href="https://www.facebook.com/maatarafilmsslg" class="fab fa-facebook"></a>
          <a href="#" class="fab fa-instagram"></a>
          <a href="#" class="fab fa-youtube"></a>
          <a href="#" class="fab fa-twitter"></a>


        </div><!-- /.mobile-nav__social -->
      </div><!-- /.mobile-nav__top -->



    </div>
    <!-- /.mobile-nav__content -->
  </div>
  <!-- /.mobile-nav__wrapper -->

  <div class="search-popup">
    <div class="search-popup__overlay search-toggler"></div>
    <!-- /.search-popup__overlay -->
    <div class="search-popup__content">
      <form action="#">
        <label for="search" class="sr-only">search here</label><!-- /.sr-only -->
        <input type="text" id="search" placeholder="Search Here..." />
        <button type="submit" aria-label="search submit" class="thm-btn">
          <i class="fas fa-search"></i>
        </button>
      </form>
    </div>
    <!-- /.search-popup__content -->
  </div>
  <!-- /.search-popup -->

  <a href="#" data-target="html" class="scroll-to-target scroll-to-top"><i class="fas fa-arrow-up"></i></a>


  <script src="assets/vendors/jquery/jquery-3.6.0.min.js"></script>
  <script src="assets/vendors/hover-animated/imagesloaded.pkgd.min.js"></script>
  <script src="assets/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendors/jarallax/jarallax.min.js"></script>
  <script src="assets/vendors/jquery-ajaxchimp/jquery.ajaxchimp.min.js"></script>
  <script src="assets/vendors/jquery-appear/jquery.appear.min.js"></script>
  <script src="assets/vendors/jquery-circle-progress/jquery.circle-progress.min.js"></script>
  <script src="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.min.js"></script>
  <script src="assets/vendors/jquery-validate/jquery.validate.min.js"></script>
  <script src="assets/vendors/odometer/odometer.min.js"></script>
  <script src="assets/vendors/swiper/swiper.min.js"></script>
  <script src="assets/vendors/wnumb/wNumb.min.js"></script>
  <script src="assets/vendors/wow/wow.js"></script>
  <script src="assets/vendors/isotope/isotope.js"></script>
  <script src="assets/vendors/owl-carousel/owl.carousel.min.js"></script>
  <script src="assets/vendors/bootstrap-select/js/bootstrap-select.min.js"></script>
  <script src="assets/vendors/jquery-ui/jquery-ui.js"></script>
  <script src="assets/vendors/jquery.circle-type/jquery.circleType.js"></script>
  <script src="assets/vendors/jquery.circle-type/jquery.lettering.min.js"></script>
  <script src="assets/vendors/sidebar-content/jquery-sidebar-content.js"></script>
  <script src="assets/vendors/marquee/marquee.min.js"></script>
  <script src="assets/vendors/hover-animated/charming.min.js"></script>
  <script src="assets/vendors/hover-animated/demo.js"></script>
  <script src="assets/vendors/hover-animated/tweenMax.min.js"></script>


  <!-- template js -->
  <script src="assets/js/eston.js"></script>
</body>


<!-- Mirrored from themedox.com/demo/eston/about.php by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 18 Dec 2023 10:51:25 GMT -->

</html>