revealability

Back Back Up Advanced Editor

<?php include("include/header.php"); ?>

<head>
        
        <title>OVA Gallery | Inspiring Stories</title>
        <meta name="description" content="Explore our gallery to see the inspiring work of our volunteers and the impact they create.">
        <meta name="keywords" content="volunteer stories, impact stories, social impact, volunteer photos, volunteer videos">
        <meta name="robots" content="index, follow">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="language" content="English">
        <link rel="canonical" href="https://www.ova.ngo/gallery.php">
        
        <meta property="og:title" content="OVA Gallery | Inspiring Stories">
        <meta property="og:description" content="Explore our gallery to see the inspiring work of our volunteers and the impact they create.">
        <meta property="og:image" content="assets/images/logo.png">
        <meta property="og:url" content="https://www.ova.ngo/gallery.php">

<meta name="twitter:title" content="OVA Gallery | Inspiring Stories">
        <meta name="twitter:description" content="Explore our gallery to see the inspiring work of our volunteers and the impact they create.">
        <meta name="twitter:url" content="https://www.ova.ngo/gallery.php">
        <meta name="twitter:card" content="summary">
    </head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="page-title bg-background-area" data-bg="assets/images/bg3.jpg">
    <div class="overlay"></div>
   <div class="page-title-container">
      <div class="page-title-wrapper">
         <div class="container">
            <div class="row">
               <div class="col col-xs-12">
                  <h2>Gallery</h2>
                  <ol class="breadcrumb">
                     <li><a href="./">Home</a></li>
                     <li>Gallery</li>
                  </ol>
               </div>
            </div>
            
         </div>
         
      </div>
   </div>
</section>
<section class="container mt-4 mb-4">
   <div class="row popup-gallery">
         <?php 
$stm16=$conn->prepare("SELECT * FROM gallery where delete_status = 0");
$stm16->execute();
$ro16=$stm16->fetchAll();
foreach ($ro16 as $ke16) {
  
?>
         <div class="col-md-4">
            <a href="panel/assets/images/<?php echo $ke16['photo'];?>" class="image-overlay" alt="volunteer photos">
               <img src="panel/assets/images/<?php echo $ke16['photo'];?>" alt="volunteer photos">
               <div class="overlay">
                <i class="fa fa-eye"></i><br>
                <p><?php echo $ke16['description'];?></p>
            </div>
            </a>
         </div>
       <?php } ?>
       
</div>
</section>
<?php include("include/footer.php"); ?>
<script>
   $(document).ready(function() {
   $('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
         enabled: true,
         navigateByImgClick: true,
         preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
         tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
         titleSrc: function(item)
      }
   });
});
</script>