<!DOCTYPE html>
<html>
<head>
<?php include 'Head.php'; ?>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
           <link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet"
            type="text/css">
             <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
</head>

<body>

<div class="page-wrapper">
	
	<!-- Cursor -->
	<?php include "Preloder-And-Cursor.php"; ?>
	<!-- End Preloader -->
	
	<!-- Main Header -->
	<header class="main-header">
    <?php include "Header-Menu.php"; ?>
	</header>
	<!-- End Main Header -->
	
<!-- Page Title -->
    <section class="page-title" style="background-image:url(assets/images/background/page-title.jpg)">
        <div class="auto-container">
			<h2>Gallery</h2>
			<ul class="bread-crumb clearfix">
				<li><a href="index.php">Home</a></li>
				<li>Gallery</li>
			</ul>
        </div>
    </section>
    <!-- End Page Title -->

	


	<div class="container mt-5">
		 <div id="my_nanogallery2"></div>
        <script>
            $(document).ready(function () {
                $("#my_nanogallery2").nanogallery2({
                    items: [
                        { src: 'assets/Gallery/1.jpg', srct: 'assets/Gallery/1.jpg', title: 'Image 1' },
                        { src: 'assets/Gallery/2.jpg', srct: 'assets/Gallery/2.jpg', title: 'Image 2' },
                        { src: 'assets/Gallery/3.jpg', srct: 'assets/Gallery/3.jpg', title: 'Image 3' },
                        { src: 'assets/Gallery/4.jpg', srct: 'assets/Gallery/4.jpg', title: 'Image 4' },
                        { src: 'assets/Gallery/5.jpg', srct: 'assets/Gallery/5.jpg', title: 'Image 5' },
                        { src: 'assets/Gallery/6.jpg', srct: 'assets/Gallery/6.jpg', title: 'Image 6' },
                        { src: 'assets/Gallery/7.jpg', srct: 'assets/Gallery/7.jpg', title: 'Image 7' },
                        { src: 'assets/Gallery/8.jpg', srct: 'assets/Gallery/8.jpg', title: 'Image 8' },
                        { src: 'assets/Gallery/9.jpg', srct: 'assets/Gallery/9.jpg', title: 'Image 9' },
                        { src: 'assets/Gallery/10.jpg', srct: 'assets/Gallery/10.jpg', title: 'Image 10' },
                        { src: 'assets/Gallery/11.jpg', srct: 'assets/Gallery/11.jpg', title: 'Image 11' },
                        { src: 'assets/Gallery/12.jpg', srct: 'assets/Gallery/12.jpg', title: 'Image 12' },
                        { src: 'assets/Gallery/13.jpg', srct: 'assets/Gallery/13.jpg', title: 'Image 13' },
                        { src: 'assets/Gallery/14.jpg', srct: 'assets/Gallery/14.jpg', title: 'Image 14' },
                        { src: 'assets/Gallery/15.jpg', srct: 'assets/Gallery/15.jpg', title: 'Image 15' },
                        { src: 'assets/Gallery/16.jpg', srct: 'assets/Gallery/16.jpg', title: 'Image 16' },
                        { src: 'assets/Gallery/17.jpg', srct: 'assets/Gallery/17.jpg', title: 'Image 17' },
                        { src: 'assets/Gallery/18.jpg', srct: 'assets/Gallery/18.jpg', title: 'Image 18' },
                        { src: 'assets/Gallery/19.jpg', srct: 'assets/Gallery/19.jpg', title: 'Image 19' },
                        { src: 'assets/Gallery/20.jpg', srct: 'assets/Gallery/20.jpg', title: 'Image 20' },
                        { src: 'assets/Gallery/21.jpg', srct: 'assets/Gallery/21.jpg', title: 'Image 21' },
                    ],
                    // album: 'people',

                    // GALLERY AND THUMBNAIL LAYOUT
                    galleryMosaic: [                       // default layout
                        { w: 2, h: 2, c: 1, r: 1 },
                        { w: 1, h: 1, c: 3, r: 1 },
                        { w: 1, h: 1, c: 3, r: 2 },
                        { w: 1, h: 2, c: 4, r: 1 },
                        { w: 2, h: 1, c: 5, r: 1 },
                        { w: 2, h: 2, c: 5, r: 2 },
                        { w: 1, h: 1, c: 4, r: 3 },
                        { w: 2, h: 1, c: 2, r: 3 },
                        { w: 1, h: 2, c: 1, r: 3 },
                        { w: 1, h: 1, c: 2, r: 4 },
                        { w: 2, h: 1, c: 3, r: 4 },
                        { w: 1, h: 1, c: 5, r: 4 },
                        { w: 1, h: 1, c: 6, r: 4 }
                    ],
                    galleryMosaicXS: [                     // layout for XS width
                        { w: 2, h: 2, c: 1, r: 1 },
                        { w: 1, h: 1, c: 3, r: 1 },
                        { w: 1, h: 1, c: 3, r: 2 },
                        { w: 1, h: 2, c: 1, r: 3 },
                        { w: 2, h: 1, c: 2, r: 3 },
                        { w: 1, h: 1, c: 2, r: 4 },
                        { w: 1, h: 1, c: 3, r: 4 }
                    ],
                    galleryMosaicSM: [                     // layout for SM width
                        { w: 2, h: 2, c: 1, r: 1 },
                        { w: 1, h: 1, c: 3, r: 1 },
                        { w: 1, h: 1, c: 3, r: 2 },
                        { w: 1, h: 2, c: 1, r: 3 },
                        { w: 2, h: 1, c: 2, r: 3 },
                        { w: 1, h: 1, c: 2, r: 4 },
                        { w: 1, h: 1, c: 3, r: 4 }
                    ],
                    galleryMaxRows: 1,
                    galleryDisplayMode: 'rows',
                    gallerySorting: 'random',
                    thumbnailDisplayOrder: 'random',

                    // thumbnailHeight: '180', thumbnailWidth: '220',
                    thumbnailHeight: '160', thumbnailWidth: '200',
                    thumbnailAlignment: 'scaled',
                    thumbnailGutterWidth: 0, thumbnailGutterHeight: 0,
                    thumbnailBorderHorizontal: 0, thumbnailBorderVertical: 0,

                    thumbnailToolbarImage: null,
                    thumbnailToolbarAlbum: null,
                    thumbnailLabel: { display: false },

                    // DISPLAY ANIMATION
                    // for gallery
                    galleryDisplayTransitionDuration: 1500,
                    // for thumbnails
                    thumbnailDisplayTransition: 'imageSlideUp',
                    thumbnailDisplayTransitionDuration: 1200,
                    thumbnailDisplayTransitionEasing: 'easeInOutQuint',
                    thumbnailDisplayInterval: 60,

                    // THUMBNAIL HOVER ANIMATION
                    thumbnailBuildInit2: 'image_scale_1.15',
                    thumbnailHoverEffect2: 'thumbnail_scale_1.00_1.05_300|image_scale_1.15_1.00',
                    touchAnimation: true,
                    touchAutoOpenDelay: 500,

                    // LIGHTBOX
                    // viewerToolbar: { display: false },
                    // viewerTools: {
                    //     topLeft: 'label',
                    //     topRight: 'shareButton, rotateLeft, rotateRight, fullscreenButton, closeButton'
                    // },

                    // GALLERY THEME
                    galleryTheme: {
                        thumbnail: { background: '#111' },
                    },

                    // DEEP LINKING
                    // locationHash: true

                    // THUMBNAIL TOOLS & LABEL
                    thumbnailLabel: { display: true, position: 'onBottomOverImage', hideIcons: true, titleFontSize: '1em', align: 'left', titleMultiLine: true, displayDescription: false },
                    thumbnailToolbarImage: null,
                    thumbnailToolbarAlbum: null,

                    // THUMBNAIL HOVER ANIMATION
                    // thumbnailHoverEffect2: 'label_font-size_1em_1.5em|title_backgroundColor_rgba(255,255,255,0.34)_rgba(((35,203,153,0.8)|title_color_#fff_#fff|image_scale_1.00_1.10_5000|image_rotateZ_0deg_4deg_5000',
                    // thumbnailEffect2: 'label_font-size_1em_1.5em|title_backgroundColor_rgba(255,255,255,0.34)_rgba(((35,203,153,0.8)|title_color_#000_#fff|image_scale_1.00_1.10_5000|image_rotateZ_0deg_4deg_5000',
                    // THUMBNAIL HOVER ANIMATION
                    thumbnailHoverEffect2: 'label_font-size_1em_1.5em|title_backgroundColor_rgba(255,255,255,0.34)_rgba(((35,203,153,0.8)|title_color_#000_#fff|image_scale_1.00_1.10_5000|image_rotateZ_0deg_4deg_5000',
                    touchAnimation: true,
                    touchAutoOpenDelay: 800,

                    // GALLERY THEME
                    galleryTheme: {
                        thumbnail: { titleShadow: 'none', titleColor: '#fff', borderColor: '#fff' },
                        navigationBreadcrumb: { background: '#3C4B5B' },
                        navigationFilter: { background: '#003C3F', backgroundSelected: '#2E7C7F', color: '#fff' }
                    },
                    thumbnailL1GutterWidth: 10,
                    thumbnailL1GutterHeight: 10,

                    touchAnimation: true,
                    touchAutoOpenDelay: 800,
                });
            });
        </script>
	</div>


<br><br><br><br><br>
	<!-- Footer Style -->
	<?php include "Footer.php"; ?>