1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / esachqig / public_html / test /
Filename : gallery.php
back
<?php
include_once('meta/dbconfig.php');
include_once('meta/header.php');

?>

	<!-- Header section end -->

<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;

	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;

}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */


.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

	<!-- Page info -->
	<div class="page-info-section set-bg" data-setbg="img/page-bg/5.jpg">
		<div class="container">
			<div class="site-breadcrumb">
				<a href="#">Home</a>
				<span>Gallery</span>
			</div>
		</div>
	</div>
	<!-- Page info end -->

<!-- single course section -->
	<section class="single-course spad pb-0">
		<div class="container">
			<h2>Our Gallery</h2>
			<p>Moments with students</p>
				<?php            
                      $query = "SELECT * FROM ec_gallery_img";

                        $query_run = mysqli_query($connection, $query);
                     
                      if(mysqli_num_rows($query_run) > 0)

                      {
                        while($row = mysqli_fetch_assoc($query_run))
                          {
                              ?>

			<div class="slideshow-container">

				<div class="mySlides fade">
				 <?php echo '<img src="h/upload/main/'.$row['images'].'" style="width:60%;">' ?>
				  <div class="text"> <?php echo $row['ec_title_nm']; ?></div>
				</div>
			</div>
			<br>

			<div style="text-align:center">
			  <span class="dot"></span> 
			</div>
			  <?php
                            }

                        } 

                        else {
                          //echo "No record found";
                        }
                        ?>

		</div>
	</section>
	<!-- single course section end -->

	<script>
let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>


<!------grid--->
<section class="section">
	<div class="gridlist">

		<?php            
                      $query = "SELECT * FROM ec_gallery_img";

                        $query_run = mysqli_query($connection, $query);
                     
                      if(mysqli_num_rows($query_run) > 0)

                      {
                        while($row = mysqli_fetch_assoc($query_run))
                          {
                              ?>

      <a data-lightbox="homePortfolio" class="<?php echo $row['ec_class']; ?>">
        <?php echo '<img src="h/upload/main/'.$row['images'].'">' ?>
      </a>

      <?php
                            }

                        } 

                        else {
                          //echo "No record found";
                        }
                        ?>
      
    </div>
  </section>
<!-- partial -->

<style type="text/css">
	 gridlist > a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.gridlist > a > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 2px 16px var(--shadow);
}

.gridlist {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: 120px;
  grid-auto-flow: dense;
}

.horizontal {
  grid-column: span 2;
}

.vertical {
  grid-row: span 2;
}

.big {
  grid-column: span 2;
  grid-row: span 2;
}
</style>



<?php
include_once('meta/footer.php');
?>