File: /var/www/grapossconnect/grapossconnect/news-media.php
<?php include 'header.php'; ?>
<style>
.HeaderSection {
background: #eec9cb;
}
.TopHeaderSection .HeaderContact span {
color: #1f1f1f;
}
.TopHeaderSection h2 a {
color: #434343;
border-right: 1px solid #5c5c5c;
}
</style>
<!-- ALL PAGE HEADER SECTION -->
<section class="AllpageHeaderSection">
<div class="AllpageHeaderBg" style="background-image: url(/grapossconnect/images/page-banner-1.jpg);"></div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- <img class="wow fadeInUp" src="https://meriwebsite.in/wp-content/themes/meriwebsite/images/merilogonobg.png" alt=""> -->
<h2 class="wow fadeInUp">News & Media
<span><a href="">Home</a> News & Media</span>
</h2>
</div>
</div>
</div>
</section>
<section class="PhotoGallery-section" id="gallery">
<div class="container" id="image-gallery">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- <p class="NewsMediapara">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus natus et ullam debitis corrupti ab, fugit sunt modi dicta! Ab nemo facilis facere excepturi, enim animi nulla minima magni itaque. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus natus et ullam debitis corrupti ab, fugit sunt modi dicta! Ab nemo facilis facere excepturi, enim animi nulla minima magni itaque.</p> -->
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media1.jpeg">
<img src="/images/media1.jpeg">
</a>
<div class="img-overlay" style="opacity: 0;">
<!-- <h4>Trending Now</h4> -->
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media2.jpeg">
<img src="/images/media2.jpeg">
</a>
<div class="img-overlay" style="opacity: 0;">
<!-- <h4>Premium Gifts</h4> -->
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media3.jpeg">
<img src="/images/media3.jpeg">
</a>
<div class="img-overlay dvf" style="opacity: 0;">
<!-- <h4>Personalized</h4> -->
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media4.jpeg">
<img src="/images/media4.jpeg">
</a>
<div class="img-overlay" style="opacity: 0;">
<!-- <h4>Personalized</h4> -->
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media5.jpeg">
<img src="/images/media5.jpeg">
</a>
<div class="img-overlay" style="opacity: 0;">
<!-- <h4>Personalized</h4> -->
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media6.jpeg">
<img src="/images/media6.jpeg">
</a>
<div class="img-overlay" style="opacity: 0;">
<!-- <h4>Personalized</h4> -->
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media7.jpeg">
<img src="/images/media7.jpeg">
</a>
<div class="img-overlay" style="opacity: 0;">
<!-- <h4>Personalized</h4> -->
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media8.jpeg">
<img src="/images/media8.jpeg">
</a>
<div class="img-overlay" style="opacity: 0;">
<!-- <h4>Personalized</h4> -->
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 image">
<div class="img-wrapper">
<a href="/images/media9.jpeg">
<img src="/images/media9.jpeg">
</a>
<div class="img-overlay" style="opacity: 0;">
<!-- <h4>Personalized</h4> -->
</div>
</div>
</div>
</div>
</div>
<div id="overlay" style="display: none;">
<div id="prevButton"><i class="fa fa-chevron-left"></i></div><img src="/images/media2.jpeg">
<div id="nextButton"><i class="fa fa-chevron-right"></i></div>
<div id="exitButton"><i class="fa fa-times"></i></div>
</div>
</section>
<script>
// Gallery image hover
$(".img-wrapper").hover(
function() {
$(this).find(".img-overlay").animate({
opacity: 1
}, 600);
},
function() {
$(this).find(".img-overlay").animate({
opacity: 0
}, 600);
}
);
// Lightbox
var $overlay = $('<div id="overlay"><div class="overlayModalMedia"></div></div>');
var $image = $("<img>");
var $prevButton = $(
'<div id="prevButton"><i class="fa fa-chevron-left"></i></div>'
);
var $nextButton = $(
'<div id="nextButton"><i class="fa fa-chevron-right"></i></div>'
);
var $exitButton = $('<div id="exitButton"><i class="fa fa-times"></i></div>');
// Add overlay
$overlay
.append($image)
.prepend($prevButton)
.append($nextButton)
.append($exitButton);
$("#gallery").append($overlay);
// Hide overlay on default
$overlay.hide();
// When an image is clicked
$(".img-overlay").click(function(event) {
// Prevents default behavior
event.preventDefault();
// Adds href attribute to variable
var imageLocation = $(this).prev().attr("href");
// Add the image src to $image
$image.attr("src", imageLocation);
// Fade in the overlay
$overlay.fadeIn("slow");
});
// When the overlay is clicked
$overlay.click(function() {
// Fade out the overlay
$(this).fadeOut("slow");
});
// When next button is clicked
$nextButton.click(function(event) {
// Hide the current image
$("#overlay img").hide();
// Overlay image location
var $currentImgSrc = $("#overlay img").attr("src");
// Image with matching location of the overlay image
var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
// Finds the next image
var $nextImg = $($currentImg.closest(".image").next().find("img"));
// All of the images in the gallery
var $images = $("#image-gallery img");
// If there is a next image
if ($nextImg.length > 0) {
// Fade in the next image
$("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
} else {
// Otherwise fade in the first image
$("#overlay img").attr("src", $($images[0]).attr("src")).fadeIn(800);
}
// Prevents overlay from being hidden
event.stopPropagation();
});
// When previous button is clicked
$prevButton.click(function(event) {
// Hide the current image
$("#overlay img").hide();
// Overlay image location
var $currentImgSrc = $("#overlay img").attr("src");
// Image with matching location of the overlay image
var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
// Finds the next image
var $nextImg = $($currentImg.closest(".image").prev().find("img"));
// Fade in the next image
$("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
// Prevents overlay from being hidden
event.stopPropagation();
});
// When the exit button is clicked
$exitButton.click(function() {
// Fade out the overlay
$("#overlay").fadeOut("slow");
});
</script>
<?php include 'footer.php'; ?>