<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/gallery.css')?>">
<link rel='stylesheet' href='<?=base_url('assets/css/jquery.fancybox.min.css')?>'>

<main id="main"  style="background-image: url(<?=base_url('assets/img/elegant-background-with-mandala.png');?>);background-size: auto;">


	<div class="gallery-section mt-0">
		<h2 id="temple-services" class="text-center bottomborder">Gallery of <?=GetProjectName();?></h2>

		<div class="row mt-0">

			<div align="center">
				<button class="btn btn-default filter-button active my-2" data-filter="all">All</button>
				<button class="btn btn-default filter-button my-2" data-filter="images">Images</button>
				<button class="btn btn-default filter-button my-2" data-filter="videos">Videos</button>

			</div>
			<br/>
		</div>
		<div class="responsive-container">
			<div class="gallery-box">
				
				<?php foreach($Child_Grid as $item){ ?>
					<div class="box filter <?= $parent_data['refDataName']; ?> images">
						<a href="<?= ApiBaseUrl()['url'].$item['eventImage']; ?>"
							data-fancybox="gallery1">
							<img src="<?= ApiBaseUrl()['url'].$item['eventImage']; ?>"
							class="img-fluid">
						</a>
					</div>
				<?php } ?>

			</div>

		</div>
	</div>
	<script src="<?=base_url('assets/js/popper.min.js')?>"></script>
	<script src='<?=base_url('assets/js/jquery.fancybox.min.js')?>'></script>

</main>

<script type="text/javascript">
	$(document).ready(function(){

		$(".filter-button").click(function(){
			var value = $(this).attr('data-filter');
			if ($(".filter-button").removeClass("active")) {
				$(this).removeClass("active");
			}
			$(this).addClass("active");
			if(value == "all")
			{
				$('.filter').show('1000');
			}
			else
			{
				$(".filter").not('.'+value).hide('3000');
				$('.filter').filter('.'+value).show('3000');
			}
		});

		

	});
</script>
<script type="text/javascript">
	$(document).ready(function() {
		window.scrollTo({ top: 250, behavior: 'smooth'});
	});
</script>

<?php $this->load->view('includes/footer') ?>
<?php $this->load->view('includes/script') ?>
