CasperSecurity
<!DOCTYPE html>
<?php
include('includes/connection.php');
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="html 5 template, dentist, stomatologist, dental clinic template, medical template, clinic template, surgery clinic theme, plastic surgery template">
<meta name="author" content="websmirno.site">
<meta name="format-detection" content="telephone=no">
<title>UIM</title>
<!-- Stylesheets -->
<link href="vendor/slick/slick.css" rel="stylesheet">
<link href="vendor/animate/animate.min.css" rel="stylesheet">
<link href="vendor/twentytwenty/twentytwenty.css" rel="stylesheet">
<link href="icons/style.css" rel="stylesheet">
<link href="vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<!--Favicon-->
<link rel="icon" href="images/favicon-32x32.png" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
</head>
<body class="shop-page layout-medlab">
<!--header-->
<?php include('header.php');?>
<!--//header-->
<div class="page-content">
<!--section-->
<div class="section mt-0">
<div class="breadcrumbs-wrap">
<div class="container">
<div class="breadcrumbs">
<a href="index.html">Home</a>
<span>Gallery</span>
</div>
</div>
</div>
</div>
<!--//section-->
<!--section-->
<div class="section page-content-first">
<div class="container">
<div class="text-center mb-2 mb-md-3 mb-lg-4">
<div class="h-sub theme-color">Our College Stories</div>
<h1>Image Gallery</h1>
<div class="h-decor"></div>
</div>
</div>
<div class="container">
<div class="row align-items-stretch dorothea-photos">
<div class="col-12">
<div class="text-center mb-3 mb-md-4 max-900">
<p>We love to see our student smile! Here are some of our best before-and-after pictures,
<br>all in one fantastic Smile Gallery</p>
</div>
<!--<div class="filters-by-category mb-2 mb-lg-4">
<ul class="option-set justify-content-center" data-option-key="filter">
<li>
<a href="#filter" data-option-value="*" class="selected">All</a>
</li>
<li>
<a href="#filter" data-option-value=".category1">Crowns</a>
</li>
<li>
<a href="#filter" data-option-value=".category2">Bridges</a>
</li>
<li>
<a href="#filter" data-option-value=".category3">Dental Implants</a>
</li>
<li>
<a href="#filter" data-option-value=".category4">Cosmetic Filling</a>
</li>
<li>
<a href="#filter" data-option-value=".category5">Lumineers</a>
</li>
<li>
<a href="#filter" data-option-value=".category6">Dentures</a>
</li>
<li>
<a href="#filter" data-option-value=".category7">Porcelain Veneers</a>
</li>
<li>
<a href="#filter" data-option-value=".category8">Diamond Polish</a>
</li>
</ul>
</div>-->
<div class="gallery-wrap">
<div class="loading-content">
<div class="inner-circles-loader"></div>
</div>
<div class="gallery-specialist gallery-isotope" id="gallery-specialist">
<?php
$sql_gallery = db_query("SELECT * from photo_gallery order by id desc ");
while($res_gallery = mysqli_fetch_array($sql_gallery)){
?>
<div class="moreBox">
<div class="gallery-item category1 category7">
<a href="photo_gallery/<?php echo $res_gallery['photo']; ?>" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
<img src="photo_gallery/<?php echo $res_gallery['photo']; ?>" class="img-fluid rounded">
</a>
</div>
</div>
<?php } ?>
</div>
<div class="row">
<div class="col-md-12 text-center" id="loadMore">
<a href="#"><i class="fa fa-plus-circle" aria-hidden="true" style="font-size: 50px;"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row align-items-stretch dorothea-photos mt-5">
<div class="col-md-12">
<div class="text-center mb-2 mb-md-3 mb-lg-4">
<h1>Video Gallery</h1>
<div class="h-decor"></div>
</div>
</div>
<div class="col-md-12 gallery-view mt-3">
<?php
$sql_vd = db_query("SELECT * from video_gallery order by id desc ");
while($res_vd = mysqli_fetch_array($sql_vd)){
?>
<div class="col-md-4 gallery-videos">
<div class="">
<iframe width="200" height="100" src="https://www.youtube.com/embed/<?php echo $res_vd['link']; ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<?php } ?>
</div>
<!-- <div class="col-md-12 gallery-view mt-3">
<div class="col-md-4 gallery-videos">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" class="col-md-4">
<img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-md-4 gallery-videos">
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" class="col-md-4">
<img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">
</a>
</div>
<div class="col-md-4 gallery-videos">
<a href="http://player.vimeo.com/video/80629469" data-toggle="lightbox" class="col-md-4">
<img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid">
</a>
</div>
</div> -->
</div>
</div>
</div>
<!--//section-->
</div>
<!--footer-->
<?php include("footer.php"); ?>
<!--//footer-->
<div class="backToTop js-backToTop">
<i class="icon icon-up-arrow"></i>
</div>
<!-- Vendors -->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/jquery-migrate/jquery-migrate-3.0.1.min.js"></script>
<script src="vendor/cookie/jquery.cookie.js"></script>
<script src="vendor/bootstrap-datetimepicker/moment.js"></script>
<script src="vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/bootstrap.min.js"></script>
<script src="vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="vendor/waypoints/sticky.min.js"></script>
<script src="vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="vendor/slick/slick.min.js"></script>
<script src="vendor/scroll-with-ease/jquery.scroll-with-ease.min.js"></script>
<script src="vendor/countTo/jquery.countTo.js"></script>
<script src="vendor/form-validation/jquery.form.js"></script>
<script src="vendor/form-validation/jquery.validate.min.js"></script>
<script src="vendor/twentytwenty/jquery.event.move.js"></script>
<script src="vendor/twentytwenty/jquery.twentytwenty.js"></script>
<script src="vendor/isotope/isotope.pkgd.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script> -->
<!-- Custom Scripts -->
<script src="js/app.js"></script>
<script src="js/app-shop.js"></script>
<script src="form/forms.js"></script>
<script>
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox({
alwaysShowClose: false,
});
});
$(document).ready(function () {
$(".moreBox").slice(0, 3).show();
$("#loadMore").on('click', function (e) {
e.preventDefault();
$(".moreBox:hidden").slice(0, 3).slideDown();
if ($(".moreBox:hidden").length == 0) {
$("#loadMore").fadeOut('slow');
newHeight = $('#gallery-specialist').height()+426;
$('#gallery-specialist').height(newHeight);
}
});
});
</script>
</body>
</html>