1#@!#!123s

: / home / schoolcampuserp / siddhipublicschool.in /
Filename : gallery.php
back
<?php
include('admin/database/dbconfig.php');
?>

<!DOCTYPE html>
<html lang="en">

<?php include('head.php') ?>

    <body>

        <?php include('header.php') ?>

        <!-- Header Start -->
        <div class="container-fluid bg-breadcrumb">
            <div class="container text-center py-5" style="max-width: 900px;">
                <h3 class="text-primary display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">Gallery</h1>
                <ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
                    <li class="breadcrumb-item"><a href="index.php" class="text-dark">Home</a></li>
                    <li class="breadcrumb-item active text-primary">Gallery</li>
                </ol>    
            </div>
        </div>
        <!-- Header End -->
         <!-- Banner Start -->
    <?php include('banner.php') ?>
    <!-- Banner End -->

        <!-- Gallery Start -->
    <div class="container-fluid gallery pb-5 mt-5">
        <div class="container pb-5">
            <div class="pb-5">
                <div class="row g-4 align-items-end">
                    <div class="col-xl-8">
                        <h4 class="text-secondary sub-title fw-bold wow fadeInUp" data-wow-delay="0.1s"> Gallery</h4>
                        <h1 class="display-2 mb-0 wow fadeInUp text-primary" data-wow-delay="0.3s"> Latest Photo gallery</h1>
                    </div>
                </div>
            </div>
            <div class="tab-class wow fadeInUp" data-wow-delay="0.1s">
                <ul class="nav nav-pills d-inline-flex justify-content-center pb-4">
                    <li class="nav-item bg-light border border-primary rounded-pill mb-4">
                        <a class="d-flex py-2 px-5 rounded-pill active" data-bs-toggle="pill" href="#GalleryTab">
                            <span class="text-dark">All</span>
                        </a>
                    </li>
                    <?php 
                        $sql6 = "SELECT DISTINCT gc.* FROM gallery_category gc INNER JOIN gallery g ON gc.name = g.related_to WHERE g.status = 'active'";
                        $res_sql6 = mysqli_query($conn, $sql6);
                        if(mysqli_num_rows($res_sql6)>0){
                            while($row = mysqli_fetch_assoc($res_sql6)){
                         ?>
                    
                        <li class="nav-item bg-light border border-primary rounded-pill mb-4">
                            <a class="d-flex py-2 px-5 rounded-pill" data-bs-toggle="pill" href="#GalleryTab-<?php echo $row['id']; ?>">
                                <span class="text-dark"><?php echo $row['name'];?></span>
                            </a>
                        </li>
                        <?php
                                }
                            }
                        ?>
                    
                </ul>

                <div class="tab-content">
                    
                        <div id="GalleryTab" class="tab-pane fade show p-0 active">
                           
                            <div class="row g-2">
                                 <?php
                                    $sql7 = "SELECT * FROM gallery";
                                    $res_sql7 = mysqli_query($conn, $sql7);
                                    if(mysqli_num_rows($res_sql7)>0){
                                        while($row = mysqli_fetch_assoc($res_sql7)) {   
                                    ?>
                                <div class="col-sm-6 col-md-6 col-lg-4 col-xl-2 wow fadeInUp" data-wow-delay="0.1s">
                                    <div class="video h-100">
                                        <img src="admin/files/gallery/<?php echo $row['image_path']; ?>" class="img-fluid rounded w-100 h-100"
                                            style="object-fit: cover;" alt="">
                                        <button type="button" class="btn btn-play" data-bs-toggle="modal"
                                            data-src="admin/files/gallery/<?php echo $row['image_path']; ?>"
                                            data-bs-target="#videoModal">
                                            <span></span>
                                        </button>
                                    </div>
                                </div>
                                 <?php } 
                            }
                            ?>
                            </div>
                           
                        </div>
                    <?php    
                    $res_sql6 = mysqli_query($conn, $sql6);
                    if(mysqli_num_rows($res_sql6)>0){
                            while($row = mysqli_fetch_assoc($res_sql6)){
                               
                         ?>
                    <div id="GalleryTab-<?php echo $row['id']; ?>" class="tab-pane fade show p-0">
                        <div class="row g-2">
                            <?php 
                                $related_to = $row['name'];
                                $sql8 = "SELECT * FROM gallery WHERE related_to='$related_to'";
                                $res_sql8 = mysqli_query($conn, $sql8);
                                if(mysqli_num_rows($res_sql8)>0){
                                    while($res = mysqli_fetch_assoc($res_sql8)){
                            ?>
                                <div class="col-sm-6 col-md-6 col-lg-4 col-xl-2">
                                    <div class="video h-100">
                                        <img src="admin/files/gallery/<?php echo $res['image_path']; ?>" class="img-fluid rounded w-100 h-100"
                                            style="object-fit: cover;" alt="">
                                        <button type="button" class="btn btn-play" data-bs-toggle="modal"
                                            data-src="admin/files/gallery/<?php echo $res['image_path']; ?>"
                                            data-bs-target="#videoModal">
                                            <span></span>
                                        </button>
                                    </div>
                                </div>
                            <?php
                                    }
                                }
                            ?>
                            
                            
                        </div>
                    </div>
                    <?php } }?>
                </div>
            </div>
        </div>
    </div>
     <!-- Counter Facts Start -->
    <div class="container-fluid counter-facts py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="counter">
                        <div class="counter-icon w-100 d-flex align-items-center justify-content-center">
                            <h3>Year of Excellence</h3>
                        </div>
                        <div class="counter-content d-flex align-items-center justify-content-center mt-4">
                            <span class="counter-value" data-toggle="counter-up">25</span>
                            <h4 class="text-primary mb-0" style="font-weight: 600; font-size: 25px;">%</h4>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="counter">
                        <div class="counter-icon w-100 d-flex align-items-center justify-content-center">
                            <h3>Certified Teacher</h3>
                        </div>
                        <div class="counter-content d-flex align-items-center justify-content-center mt-4">
                            <span class="counter-value" data-toggle="counter-up">45</span>
                            <h4 class="text-primary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="counter">
                        <div class="counter-icon w-100 d-flex align-items-center justify-content-center">
                            <h3>Athletic Participation</h3>
                        </div>
                        <div class="counter-content d-flex align-items-center justify-content-center mt-4">
                            <span class="counter-value" data-toggle="counter-up">84</span>
                            <h4 class="text-primary mb-0" style="font-weight: 600; font-size: 25px;">+</h4>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-xl-3 wow fadeInUp" data-wow-delay="0.7s">
                    <div class="counter">
                        <div class="counter-icon w-100 d-flex align-items-center justify-content-center">
                            <h3>Satistied parents</h3>
                        </div>
                        <div class="counter-content d-flex align-items-center justify-content-center mt-4">
                            <span class="counter-value" data-toggle="counter-up">100</span>
                            <h4 class="text-primary mb-0" style="font-weight: 600; font-size: 25px;">%</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Counter Facts End -->
    <!-- Modal Image -->
    
    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded">
                
                <div class="modal-body p-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="position: absolute; top: 10px; right: 10px; z-index: 1050;"></button>
                    <!-- Display Image -->
                    <img id="modalImage" src="" alt="Preview" class="img-fluid w-100 h-100 rounded">
                </div>
            </div>
        </div>
    </div>

      

    <?php include('footer.php') ?>
    </body>

</html>