1#@!#!123s

��JFIF�� 1#@!#!123s
: / home2 / ctsnewco / public_html / dps_kalinga /
Filename : prepgraduation2024.php
back
<?php $title="Pre Graduation | Delhi Public School Kalinga"; $desc = "Delhi Public School Kalinga Pre Graduation"; $pageTitle = "PREP GRADUATION"; require_once('header.php'); $table = "graduation"; ?>
<style>

  @media(max-width:768px){
      #gallery{
          padding-top:45px;
      }
     
  }
  #gallery {
    padding-top: 95px;
    padding-bottom: 31px;
}


    @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 wow slideInUp">
                        <h2 class="page-title"><?= $pageTitle ?></h2>
                        <ul class="page-list">
                            <li><a href="index.php">Home</a></li>
                            <li><?= $pageTitle ?></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- page title end -->

    <!-- gallery area start -->

    <section id="gallery">
        <div class="container">
            <div id="image-gallery">
                <div class="row">
                    
                    
                    <?php
					$stm_sql = mysqli_query($conn,"select * from $table order by priority asc");
					while($res_stm = mysqli_fetch_array($stm_sql)){
						$cid = $res_stm['id'];
					?>
					
					<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                        <div class="img-wrapper">
                            <a href="upload/<?=$res_stm['image']?>">
                                <img src="upload/<?=$res_stm['thumbnail']?>" class="img-responsive" style="height: 170px"></a>
                            <div class="img-overlay">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
						<?php
					}
					?>
                </div>
                <!-- End row -->
            </div>
            <!-- End image gallery -->
        </div>
        <!-- End container -->
    </section>
    <!-- gallery area end -->


<?php require_once('footer.php'); ?>
   <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>