<?php
$meta_title = "Hospital Activities in Ajmer | Cancer Awareness & Health Camps";
$meta_description = "Explore hospital activities at Aadinath Cancer Medicity, Ajmer – including cancer awareness programs, community health camps, and special events by the best cancer hospital in Ajmer. Call us now!";
$meta_keywords = "hospital activities Ajmer, cancer awareness programs, health camps in Ajmer, events by best cancer hospital";
$canonical = "https://www.aadinathmedicity.com/hospital-activities-ajmer";
?>

<?php
include 'header.php'; ?>
<?php include 'includes/db.php'; ?>

<div class="breadcrumb-area text-center" style="margin-top: 130px;padding:70px; background-color: rgb(0, 38, 78);">
  <!-- Fixed BG -->
  <div class="fixed-bg" style="background-image: url(assets/img/shape/9.png);"></div>
  <!-- Fixed BG -->
  <div class="container">
    <div class="row">
      <div class="col-lg-8 offset-lg-2">
        <h1>Gallery</h1>
        <ul class="breadcrumb">
          <li><a href="best-cancer-hospital-in-ajmer.php"><i class="fas fa-home"></i> Home</a></li>
          <li class="active">Gallery</li>

        </ul>
      </div>
    </div>
  </div>
</div>



<div class="container py-5">
  <div class="row g-4">

    <?php
    $sql = "SELECT * FROM activities";
    $result = $conn->query($sql);

    if ($result->num_rows > 0):
      while ($gallery = $result->fetch_assoc()): ?>

        <!-- Gallery Items -->
        <div class="col-md-3">
          <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-image="admin/gallery/activities/upload/<?php echo $gallery['image']; ?>">
            <img src="admin/gallery/activities/upload/<?php echo $gallery['image']; ?>" alt="Gallery Image 1">
          </div>
        </div>

      <?php endwhile; ?>
    <?php else: ?>
      <div class="alert alert-warning text-center">
        No Activities Found.
      </div>
    <?php endif; ?>

  </div>
</div>


<!-- Modal for Image Popup -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <img id="modalImage" src="" alt="Selected Image" class="img-fluid">
      </div>
    </div>
  </div>
</div>

<style>
  .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  .gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  .gallery-item:hover img {
    opacity: 0.8;
  }
</style>

<script>
  // Dynamically update the modal image source
  const imageModal = document.getElementById('imageModal');
  imageModal.addEventListener('show.bs.modal', function(event) {
    const button = event.relatedTarget; // Element that triggered the modal
    const imageSrc = button.getAttribute('data-bs-image'); // Get image source from data attribute
    const modalImage = document.getElementById('modalImage');
    modalImage.src = imageSrc; // Set the modal image source
  });
</script>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>



<?php include('footer.php'); ?>