1#@!#!123s

��JFIF�� 1#@!#!123s
: / home2 / ctsnewco / public_html / dps_kalinga /
Filename : workforce-at-dpsk.php
back
<?php 
$pageTitle = "DPS Kalinga";$table = "work_force";
$title = "Workforce at DPSK | Delhi Public School Kalinga";
$desc = "Delhi Public School Kalinga Workforce at DPSK";
 require_once('header.php');
 ?>
 
<style>
.pd-bottom-90 {
    padding-bottom: 45px;
}

#gallery{
    padding-top: 95px;
    padding-bottom: 17px;
}
body{
      background-image: linear-gradient(130deg, #f3fef9, #b6f1d5, #2f875c);
}
@media screen and (max-width: 768px){
    .pd-top-60 {
    padding-top: 40px;
}
.pd-bottom-90 {
    padding-bottom: 15px;
}
#gallery{
    padding-top: 40px;
}
}
    @media screen and (min-width: 1550px){
        .breadcrumb-area{
            margin-top: 58px;
        }
     
    }
    
 
</style>

    <!-- page title start -->
    <div class="breadcrumb-area bg-black bg-relative">
        <div class="banner-bg-imgs" style="background-image: url('./assets/img/about/inner-banner-27.jpg');"></div>
        <div class="black-overlay"></div> <!-- Add this line -->
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-7 col-lg-8">
                    <div class="breadcrumb-inner text-center">
                        <h2 class="page-title">Workforce at DPSK</h2>
                        <ul class="page-list">
                            <li><a href="index.php">Home</a></li>
                            <li>About</li>
                            <li>Workforce at DPSK</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- page title end -->

    <!-- gallery area start -->

    <section id="gallery" >
        <div class="container ">
            <div class="section-title mb-0" style="text-align: center;">
                <!--<h5 class="sub-title left-border wow slideInUp" style="font-family: 'Dancing Script';">-->
                <!--    Workforce-->
                <!--</h5>-->
                <h2 class="title wow slideInUp"><span style="font-weight: 100">Workforce at</span> <span style="color:#C50011;">DPSK</span></h2>
            </div>
            <div id="image-gallery">
                <div class="row">
                    
                    <?php
					$stm_sql = mysqli_query($conn,"select * from work_force where status ='1' order by priority desc");
					while($res_stm = mysqli_fetch_array($stm_sql)){
						$cid = $res_stm['id'];
						$name = $res_stm['name'];
						$image = $res_stm['images'];
						$status = $res_stm['status'] == 0?'Inactive':'Active';
					?>
					
					<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 image mt-2">
                        <div class="img-wrapper">
                            <a href="upload/<?= $image;?>"><img src="upload/<?= $image;?>"
                                    class="img-responsive"></a>
                                    <div class="img-overlay">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            </div>
                            <div class="img-title"><?= $name ?></div>
                        </div>
                    </div>
				    <?php
					}
					?>
                    
                    
                    <!--<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 image">-->
                    <!--    <div class="img-wrapper">-->
                    <!--        <a href="assets/img/about/Pre4.jpg"><img src="assets/img/about/Pre4.jpg"-->
                    <!--                class="img-responsive"></a>-->
                    <!--                <div class="img-overlay">-->
                    <!--            <i class="fa fa-plus-circle" aria-hidden="true"></i>-->
                    <!--        </div>-->
                    <!--        <div class="img-title">Higher Sr Secondary Teachers </div>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <!--<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 image">-->
                    <!--    <div class="img-wrapper">-->
                    <!--        <a href="assets/img/about/Pre5.jpg"><img src="assets/img/about/Pre5.jpg"-->
                    <!--                class="img-responsive"></a>-->
                    <!--                <div class="img-overlay">-->
                    <!--            <i class="fa fa-plus-circle" aria-hidden="true"></i>-->
                    <!--        </div>-->
                    <!--        <div class="img-title">Administrative Staff</div>-->
                    <!--    </div>-->
                    <!--</div>-->
                </div>
                <!-- End row -->
            </div>
            <!-- End image gallery -->
        </div>
        <!-- End container -->
    </section>


    <!-- gallery area end -->


    <!-- footer area start -->
   <?php require_once('footer.php'); ?>
    <script>
        // Initialize WOW.js
        var wow = new WOW({
            boxClass: 'wow', // Class name for the elements to animate
            animateClass: 'animated', // Class name for animation
            offset: 0, // Offset (in pixels) from the bottom of the viewport to trigger the animation
            mobile: true, // Enable animations on mobile devices
            live: true // Live mode (re-initialize on DOM changes)
        });
        wow.init();
    </script>
     <script>
        // Gallery image hover
        $(".img-wrapper").hover(
            function() {
                $(this).find(".img-overlay").animate({
                    opacity: 1
                }, 600);
            },
            function() {
                $(this).find(".img-overlay").animate({
                    opacity: 0
                }, 600);
            }
        );

        // Lightbox
        var $overlay = $('<div id="overlay"></div>');
        var $image = $("<img>");
        var $prevButton = $('<div id="prevButton"><i class="fa fa-chevron-left"></i></div>');
        var $nextButton = $('<div id="nextButton"><i class="fa fa-chevron-right"></i></div>');
        var $exitButton = $('<div id="exitButton"><i class="fa fa-times"></i></div>');

        // Add overlay
        $overlay.append($image).prepend($prevButton).append($nextButton).append($exitButton);
        $("#gallery").append($overlay);

        // Hide overlay on default
        $overlay.hide();

        // When an image is clicked
        $(".img-overlay").click(function(event) {
            // Prevents default behavior
            event.preventDefault();
            // Adds href attribute to variable
            var imageLocation = $(this).prev().attr("href");
            // Add the image src to $image
            $image.attr("src", imageLocation);
            // Fade in the overlay
            $overlay.fadeIn("slow");
        });

        // When the overlay is clicked
        $overlay.click(function() {
            // Fade out the overlay
            $(this).fadeOut("slow");
        });

        // When next button is clicked
        $nextButton.click(function(event) {
            // Hide the current image
            $("#overlay img").hide();
            // Overlay image location
            var $currentImgSrc = $("#overlay img").attr("src");
            // Image with matching location of the overlay image
            var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
            // Finds the next image
            var $nextImg = $($currentImg.closest(".image").next().find("img"));
            // All of the images in the gallery
            var $images = $("#image-gallery img");
            // If there is a next image
            if ($nextImg.length > 0) {
                // Fade in the next image
                $("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
            } else {
                // Otherwise fade in the first image
                $("#overlay img").attr("src", $($images[0]).attr("src")).fadeIn(800);
            }
            // Prevents overlay from being hidden
            event.stopPropagation();
        });

        // When previous button is clicked
        $prevButton.click(function(event) {
            // Hide the current image
            $("#overlay img").hide();
            // Overlay image location
            var $currentImgSrc = $("#overlay img").attr("src");
            // Image with matching location of the overlay image
            var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
            // Finds the next image
            var $nextImg = $($currentImg.closest(".image").prev().find("img"));
            // Fade in the next image
            $("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
            // Prevents overlay from being hidden
            event.stopPropagation();
        });

        // When the exit button is clicked
        $exitButton.click(function() {
            // Fade out the overlay
            $("#overlay").fadeOut("slow");
        });
    </script>