File: /var/www/grapossconnect/news-media.php
<?php include 'header.php'; ?>
<style type="text/css">
div.sdetail-error {
color: #c6484e;
font-size: 12px;
border: 1px solid #f2b1b8;
padding: 7px 13px;
text-align: center;
width: 70%;
background-color: #fadde0;
margin: 0 auto 1em;
}
div.sdetail-success {
color: #004000;
font-size: 12px;
border: 1px solid #004000;
padding: 7px 14px;
text-align: left;
width: 430px;
background-color: #e0f1e0;
margin-bottom: 15px;
margin-top: 20px;
}
</style>
<title>Career with Graposs Connect | Graposs Connect</title>
<meta name="robots" content="index, follow">
<meta name="description" content="Trainees/ Freshers/ Experienced programmers to work in WordPress, Php, Javascript, JQuery and Node.js. Key skills required: WordPress API, MySQL/RDBMS, SQL, OOPS Concepts, HTML/CSS/JQuery, Web design">
<section class="partner-page">
<div class="page-header">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>NEWS & MEDIA</h1>
<p>Home / <span>News & Media</span></p>
</div>
</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 wow slideInLeft animated" style="visibility: visible;">
<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 wow slideInLeft animated" style="visibility: visible;">
<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 wow slideInRight animated" style="visibility: visible;">
<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 wow slideInRight animated" style="visibility: visible;">
<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 wow slideInRight animated" style="visibility: visible;">
<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 wow slideInRight animated" style="visibility: visible;">
<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 wow slideInRight animated" style="visibility: visible;">
<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 wow slideInRight animated" style="visibility: visible;">
<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 wow slideInRight animated" style="visibility: visible;">
<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'; ?>