File manager

File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/dhingrainn.com/gallery.php

Back
<!DOCTYPE html> <html lang="en-US" data-menu="centeralign3"> <head> <title>Gallery - Hotel Dhingra Inn</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="format-detection" content="telephone=no" /> <link rel="stylesheet" href="css/reset.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/wordpress.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/modulobox.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/themify-icons.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/tooltipster.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/demo.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/loftloader/assets/css/loftloader.minc3cd.css?ver=2020081301" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/elementor/assets/lib/animations/animations.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/elementor/assets/css/frontend-legacy.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/elementor/assets/css/frontend.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/hoteller-elementor/assets/css/swiper.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/hoteller-elementor/assets/css/animatedheadline.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/hoteller-elementor/assets/css/justifiedGallery.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/hoteller-elementor/assets/css/flickity.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/hoteller-elementor/assets/css/owl.theme.default.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/hoteller-elementor/assets/css/hoteller-elementor.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/hoteller-elementor/assets/css/hoteller-elementor-responsive.css" type="text/css" media="all" /> <link rel="stylesheet" href="js/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min1849.css?ver=4.7.0" type="text/css" media="all" /> <link rel="stylesheet" href="css/responsive.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/custom-css.css" type="text/css" media="all" /> <link rel="icon" href="upload/TG-Thumb.png" sizes="32x32" /> <link rel="icon" href="upload/TG-Thumb.png" sizes="192x192" /> <link rel="apple-touch-icon" href="upload/TG-Thumb.png" /> <meta name="msapplication-TileImage" content="upload/TG-Thumb.png" /> <style>.random-container { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; padding:50px 0px 50px 0; } .kun-gallery { flex: 1; } .kun-gallery ul { list-style-type: none; padding: 0; } .kun-gallery li { display: inline-block; padding: 0; } .kun-gallery ul li a { background-size: cover; background-position: center; width: 100%; height: 100%; display: block; cursor: pointer; transition: .2s ease-in-out; } .kun-gallery ul li a:hover { opacity: .9; } .kun-gallery ul li { position: relative; overflow: hidden; width: calc(33% - 0px); height: 25vw; padding: 8px; } .kun-lightbox { z-index: 999999; } .gallery-container { width: 100%; height: 100%; display: block; content: ""; position: fixed; z-index: 999998; top: 0; left: 0; display: none; /* changed to work on gallery / } .kun-modal { background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .gallery-container .left-arrow, .gallery-container .right-arrow, .gallery-container .close-icon { position: absolute; color: white; top: 50%; line-height: 0; left: 20px; font-size: 4vw; font-weight: 300; font-family: sans-serif; cursor: pointer; height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; } .gallery-container .right-arrow { right: 20px; left: auto; } .gallery-container .close-icon { top: 20px; right: 20px; left: auto; font-size: 3vw; } .kun-lightbox img { max-width: 80%; max-height: 80%; height: auto; width: auto; margin: auto; position: fixed; display: none; left: 0; right: 0; bottom: 0; top: 0; } @media only screen and (max-width: 600px) { .kun-gallery ul li { width: calc(100% - 0px); } } .elementor-860 .elementor-element.elementor-element-f7d05a0:not(.elementor-motion-effects-element-type-background), .elementor-860 .elementor-element.elementor-element-f7d05a0>.elementor-motion-effects-container>.elementor-motion-effects-layer { background-image: url(upload/gal-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body data-rsssl="1" class="home page-template-default page page-id-902 tg_menu_transparent tg_lightbox_black tg_sidemenu_desktop leftalign loftloader-lite-enabled elementor-default elementor-kit-40 elementor-page elementor-page-902"> <?php include'include/header.php'?> <!-- Begin content --> <div id="page_content_wrapper" class="noheader"> <div class="inner"> <!-- Begin main content --> <div class="inner_wrapper"> <div class="sidebar_content full_width"> <div data-elementor-type="wp-page" data-elementor-id="860" class="elementor elementor-860" data-elementor-settings="[]"> <div class="elementor-inner"> <div class="elementor-section-wrap"> <section class="elementor-section elementor-top-section elementor-element elementor-element-f7d05a0 elementor-section-stretched elementor-section-height-min-height elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-items-middle" data-id="f7d05a0" data-element_type="section" data-settings='{"stretch_section":"section-stretched","background_background":"classic","hoteller_ext_is_background_on_scroll":"false"}' > <div class="elementor-background-overlay"></div> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-row"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b39195d" data-id="b39195d" data-element_type="column" data-settings='{"hoteller_ext_is_scrollme":"false","hoteller_ext_is_smoove":"false","hoteller_ext_is_parallax_mouse":"false","hoteller_ext_is_infinite":"false","hoteller_ext_is_fadeout_animation":"false"}' > <div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-0c8ac09 elementor-widget elementor-widget-hoteller-animated-text" data-id="0c8ac09" data-element_type="widget" data-settings='{"hoteller_ext_is_fadeout_animation":"true","hoteller_ext_is_fadeout_animation_velocity":{"unit":"px","size":0.40000000000000002220446049250313080847263336181640625,"sizes":[]},"hoteller_ext_is_scrollme":"false","hoteller_ext_is_smoove":"false","hoteller_ext_is_parallax_mouse":"false","hoteller_ext_is_infinite":"false","hoteller_ext_is_fadeout_animation_direction":"up"}' data-widget_type="hoteller-animated-text.default" > <div class="elementor-widget-container"> <div class="themegoods-animated-text text-alignment-center transition-bottom overflow-hidden" data-delimiter="word" data-transition="100" data-transition-delay="0" data-transition-duration="800" > <h1> Gallery </h1> </div> </div> </div> <div class="elementor-element elementor-element-ad8de44 elementor-absolute elementor-widget elementor-widget-image" data-id="ad8de44" data-element_type="widget" data-settings='{"_position":"absolute","hoteller_image_is_animation":"false","hoteller_ext_is_scrollme":"false","hoteller_ext_is_smoove":"false","hoteller_ext_is_parallax_mouse":"false","hoteller_ext_is_infinite":"false","hoteller_ext_is_fadeout_animation":"false"}' data-widget_type="image.default" > <div class="elementor-widget-container"> <div class="elementor-image"> <img width="90" height="89" src="upload/noun_leaf_1043119-1.png" class="attachment-full size-full" alt="" loading="lazy" /> </div> </div> </div> </div> </div> </div> </div> </div> </section> <div class="random-container" style="height: 100%;"> <div class="kun-gallery"> <ul> <li> <a class="image-1" style="background-image:url(upload/gallery/g-1.jpg)"></a> </li> <li> <a class="image-2" style="background-image:url(upload/gallery/g-2.jpg)"></a> <li> <a class="image-3" style="background-image:url(upload/gallery/g-3.jpg)"></a> </li> <li> <a class="image-4" style="background-image:url(upload/gallery/g-4.jpg)"></a> </li> <li> <a class="image-5" style="background-image:url(upload/gallery/g-5.jpg)"></a> </li> <li> <a class="image-6" style="background-image:url(upload/gallery/g-6.jpg)"></a> </li> <li> <a class="image-7" style="background-image:url(upload/gallery/g-7.jpg)"></a> </li> <li> <a class="image-8" style="background-image:url(upload/gallery/g-8.jpg)"></a> </li> <li> <a class="image-9" style="background-image:url(upload/gallery/g-9.jpg)"></a> </li> <li> <a class="image-10" style="background-image:url(upload/gallery/g-10.jpg)"></a> </li> <li> <a class="image-11" style="background-image:url(upload/gallery/g-11.jpg)"></a> </li> <li> <a class="image-12" style="background-image:url(upload/gallery/g-12.jpg)"></a> </li> <li> <a class="image-13" style="background-image:url(upload/gallery/g-13.jpg)"></a> </li> <li> <a class="image-14" style="background-image:url(upload/gallery/g-14.jpg)"></a> </li> <li> <a class="image-15" style="background-image:url(upload/gallery/g-15.jpg)"></a> </li> <li> <a class="image-16" style="background-image:url(upload/gallery/g-16.jpg)"></a> </li> </ul> </div> <!------------------------- KUN LIGHTBOX ----------------------------> <div class="gallery-container"> <div class="kun-modal"></div> <div class="left-arrow"> < </div> <div class="right-arrow"> > </div> <div class="close-icon"> x </div> <div class="kun-lightbox"> <img class="image-1" src="upload/gallery/g-1.jpg" /> <img class="image-2" src="upload/gallery/g-2.jpg" /> <img class="image-3" src="upload/gallery/g-3.jpg" /> <img class="image-4" src="upload/gallery/g-4.jpg" /> <img class="image-5" src="upload/gallery/g-5.jpg" /> <img class="image-6" src="upload/gallery/g-6.jpg" /> <img class="image-7" src="upload/gallery/g-7.jpg" /> <img class="image-8" src="upload/gallery/g-8.jpg" /> <img class="image-9" src="upload/gallery/g-9.jpg" /> <img class="image-10" src="upload/gallery/g-10.jpg" /> <img class="image-11" src="upload/gallery/g-11.jpg" /> <img class="image-12" src="upload/gallery/g-12.jpg" /> <img class="image-13" src="upload/gallery/g-13.jpg" /> <img class="image-14" src="upload/gallery/g-14.jpg" /> <img class="image-15" src="upload/gallery/g-15.jpg" /> <img class="image-16" src="upload/gallery/g-16.jpg" /> <img class="image-17" src="upload/gallery/g-17.jpg" /> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End main content --> </div> <br class="clear" /> </div> <?php include'include/footer.php'?> <a id="toTop" href="javascript:;"><span class="ti-angle-up"></span></a> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script> <script type="text/javascript" src="js/jquery4a5f.js?ver=1.12.4-wp" id="jquery-core-js"></script> <script type="text/javascript" src="js/ui/core.min.js" id="jquery-ui-core-js"></script> <script type="text/javascript" src="js/ui/widget.min.js" id="jquery-ui-widget-js"></script> <script type="text/javascript" src="js/ui/mouse.min.js" id="jquery-ui-mouse-js"></script> <script type="text/javascript" src="js/ui/resizable.min.js" id="jquery-ui-resizable-js"></script> <script type="text/javascript" src="js/ui/draggable.min.js" id="jquery-ui-draggable-js"></script> <script type="text/javascript" src="js/ui/button.min.js" id="jquery-ui-button-js"></script> <script type="text/javascript" src="js/ui/position.min.js" id="jquery-ui-position-js"></script> <script type="text/javascript" src="js/ui/dialog.min.js" id="jquery-ui-dialog-js"></script> <script type="text/javascript" src="js/plugins/imagesloaded.mineda1.js?ver=4.1.4" id="imagesloaded-js"></script> <script type="text/javascript" src="js/plugins/masonry.min3a05.js?ver=4.2.2" id="masonry-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/jquery.lazy.js" id="lazy-js"></script> <script type="text/javascript" id="lazy-js-after"> jQuery(function ($) { jQuery("img.lazy").each(function () { var currentImg = jQuery(this); jQuery(this).Lazy({ onFinishedAll: function () { currentImg.parent("div.post_img_hover").removeClass("lazy"); currentImg.parent(".tg_gallery_lightbox").parent("div.gallery_grid_item").removeClass("lazy"); currentImg.parent("div.gallery_grid_item").removeClass("lazy"); }, }); }); }); </script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/modulobox.js" id="modulobox-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/jquery.parallax-scroll.js" id="parallax-scroll-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/jquery.smoove.js" id="smoove-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/parallax.js" id="parallax-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/jquery.blast.js" id="blast-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/jquery.visible.js" id="visible-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/jarallax.js" id="jarallax-js"></script> <script type="text/javascript" src="js/ui/effect.min.js" id="jquery-effects-core-js"></script> <script type="text/javascript" src="js/plugins/waypoints.min.js" id="waypoints-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/tilt.jquery.js" id="tilt-js"></script> <script type="text/javascript" src="js/plugins/jquery.stellar.min.js" id="stellar-js"></script> <script type="text/javascript" src="js/plugins/custom_plugins.js" id="hoteller-custom-plugins-js"></script> <script type="text/javascript" src="js/plugins/custom.js" id="hoteller-custom-script-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/jquery.sticky-kit.min.js" id="sticky-kit-js"></script> <script type="text/javascript" id="sticky-kit-js-after"> jQuery(function ($) { jQuery("#page_content_wrapper .sidebar_wrapper").stick_in_parent({ offset_top: 100, recalc_every: 1 }); if (jQuery(window).width() < 768 \|\| is_touch_device()) { jQuery("#page_content_wrapper .sidebar_wrapper").trigger("sticky_kit:detach"); } }); </script> <script type="text/javascript" src="js/plugins/loftloader/assets/js/loftloader.minc3cd.js?ver=2020081301" id="loftloader-lite-front-main-js"></script> <script type="text/javascript" id="hoteller-elementor-js-extra"> / <![CDATA[ / var tgAjax = { ajaxurl: "#", ajax_nonce: "198d31930d" }; / ]]> / </script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/hoteller-elementor.js" id="hoteller-elementor-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/three.min.js" id="three-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/TweenMax.js" id="tweenmax-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/momentum-slider5697.js?ver=5.5.3" id="momentum-slider-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/hover.js" id="hover-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/owl.carousel.min5697.js?ver=5.5.3" id="owl-carousel-js"></script> <script type="text/javascript" src="js/plugins/hoteller-elementor/assets/js/flickity.pkgd.js" id="flickity-js"></script> <script type="text/javascript" src="js/plugins/jquery.cookie.js" id="hoteller-jquery-cookie-js"></script> <script type="text/javascript" src="js/plugins/jquery.tooltipster.min.js" id="tooltipster-js"></script> <script type="text/javascript" src="js/plugins/demo.js" id="hoteller-demo-js"></script> <script type="text/javascript" src="js/plugins/elementor/assets/js/frontend-modules.min.js" id="elementor-frontend-modules-js"></script> <script type="text/javascript" src="js/plugins/elementor/assets/lib/dialog/dialog.mina288.js?ver=4.8.1" id="elementor-dialog-js"></script> <script type="text/javascript" src="js/plugins/elementor/assets/lib/waypoints/waypoints.min05da.js?ver=4.0.2" id="elementor-waypoints-js"></script> <script type="text/javascript" src="js/plugins/elementor/assets/lib/swiper/swiper.min48f5.js?ver=5.3.6" id="swiper-js"></script> <script type="text/javascript" src="js/plugins/elementor/assets/lib/share-link/share-link.min.js" id="share-link-js"></script> <script type="text/javascript" id="elementor-frontend-js-before"> var elementorFrontendConfig = { environmentMode: { edit: false, wpPreview: false }, i18n: { shareOnFacebook: "Share on Facebook", shareOnTwitter: "Share on Twitter", pinIt: "Pin it", download: "Download", downloadImage: "Download image", fullscreen: "Fullscreen", zoom: "Zoom", share: "Share", playVideo: "Play Video", previous: "Previous", next: "Next", close: "Close", }, is_rtl: false, breakpoints: { xs: 0, sm: 480, md: 768, lg: 1025, xl: 1440, xxl: 1600 }, version: "3.0.4", is_static: false, legacyMode: { elementWrappers: true }, urls: { assets: "js//plugins//elementor//assets//" }, settings: { page: [], editorPreferences: [] }, kit: { global_image_lightbox: "yes", lightbox_enable_counter: "yes", lightbox_enable_fullscreen: "yes", lightbox_enable_zoom: "yes", lightbox_enable_share: "yes", lightbox_title_src: "title", lightbox_description_src: "description", }, post: { id: 662, title: "Hoteller%20%7C%20Luxury%20Hotel%20WordPress%20Theme%20%E2%80%93%20Just%20another%20WordPress%20site", excerpt: "", featuredImage: false }, }; </script> <script type="text/javascript" src="js/plugins/elementor/assets/js/frontend.min.js" id="elementor-frontend-js"></script> </body> </html> <script>var time = 200; var galleryBoxWidth = $(".kun-gallery li").width(); //$("body").append(".gallery-container"); <---- places lightbox above all else in DOM so nothing overlaps $(".kun-gallery li").css("height", galleryBoxWidth); $(".current-image").css("display", "inline"); /------------------- gallery functionality ---------------------/ $(".kun-gallery li a").click(function() { var imgClass = $(this).attr("class"); $(".kun-lightbox img." + imgClass).addClass("current-image"); $(".gallery-container").fadeIn(time); $(".kun-lightbox .current-image").fadeIn(time); }); /---------------- light box functionality ---------------------*/ $(".gallery-container .right-arrow").click(function() { var currentLightboxImage = $(".kun-lightbox img.current-image"); var nextLightboxImage = currentLightboxImage.next("img"); if (nextLightboxImage.length) { currentLightboxImage .fadeOut(time) .next(nextLightboxImage) .fadeIn(time) .toggleClass("current-image") .prev("img") .toggleClass("current-image"); } else { currentLightboxImage.fadeOut(time).toggleClass("current-image"); $(".kun-lightbox img:first") .fadeIn(time) .toggleClass("current-image"); } }); $(".gallery-container .left-arrow").click(function() { var currentLightboxImage = $(".kun-lightbox img.current-image"); var nextLightboxImage = currentLightboxImage.prev("img"); if (nextLightboxImage.length) { currentLightboxImage .fadeOut(time) .prev(nextLightboxImage) .fadeIn(time) .toggleClass("current-image") .next("img") .toggleClass("current-image"); } else { currentLightboxImage.fadeOut(time).toggleClass("current-image"); $(".kun-lightbox img:last") .fadeIn(time) .toggleClass("current-image"); } }); $(".kun-modal, .close-icon").click(function() { $(".gallery-container").fadeOut(time); $(".kun-lightbox img.current-image") .removeClass("current-image") .fadeOut(time); }); </script>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.03 | proxy | phpinfo | Settings