File manager

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

Back
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Gallery \| Hotel Samaya</title> <link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/icofont.min.css"> <link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/media.css"> </head> <body> <?php include 'include/header.php'?> <section class="bg-inner dining bg-gray pt-5"> <div class="container"> <div class="top-part text-center"> <p></p> <h2>Gallery</h2> </div> </div> <div class="container"> <div class="row"> <div class="row"> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-1.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-1.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-2.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-2.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-3.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-3.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-4.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-4.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-5.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-5.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-6.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-6.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-7.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-7.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-8.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-8.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-9.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-9.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-10.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-10.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-11.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-11.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-12.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-12.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-13.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-13.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-14.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-14.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-15.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-15.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-16.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-16.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-17.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-17.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-18.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-18.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-19.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-19.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-20.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-20.jpg" alt="Another alt text"> </a> </div> <div class="col-lg-4 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Hotel Samaya" data-image="img/gallery/Experience-21.jpg" data-target="#image-gallery"> <img class="img-thumbnail" src="img/gallery/Experience-21.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="icofont-arrow-left"></i> </button> <button type="button" id="show-next-image" class="btn btn-secondary float-right"> <i class="icofont-arrow-right"></i> </button> </div> </div> </div> </div> </div> </div> </section> <!-- <section class="bg-inner dining p-0 gallery"> <div class="top-part text-center"> <p class="color-white pt-5">Gallery</p> </div> <div class="gallery_banner-inner"> <div class="gallery_content" style="background-image:url(img/gallery/Experience-1.jpg);"></div> <div class="gallery_content" style="background-image:url(img/gallery/Experience-2.jpg);"></div> <div class="gallery_content" style="background-image:url(img/gallery/Experience-3.jpg);"></div> <div class="gallery_content" style="background-image:url(img/gallery/Experience-4.jpg);"></div> <div class="gallery_content" style="background-image:url(img/gallery/Experience-5.jpg);"></div> <div class="gallery_content" style="background-image:url(img/gallery/Experience-6.jpg);"></div> <div class="gallery_content" style="background-image:url(img/gallery/Experience-7.jpg);"></div> </div> </section> --> <!--<section class="model_banner p-0"> <ul> <li style="background-image:url(img/gallery/Experience-1.jpg);"> <img src="img/gallery/Experience-1.jpg" alt="" /> </li> <li style="background-image:url(img/gallery/Experience-2.jpg);"><img src="img/gallery/Experience-2.jpg" alt="" /> </li> <li style="background-image:url(img/gallery/Experience-3.jpg);"><img src="img/gallery/Experience-3.jpg" alt="" /> </li> <li style="background-image:url(img/gallery/Experience-4.jpg);"><img src="img/gallery/Experience-4.jpg" alt="" /> </li> <li style="background-image:url(img/gallery/Experience-5.jpg);"><img src="img/gallery/Experience-5.jpg" alt="" /> </li> <li style="background-image:url(img/gallery/Experience-6.jpg);"><img src="img/gallery/Experience-6.jpg" alt="" /> </li> <li style="background-image:url(img/gallery/Experience-7.jpg);"><img src="img/gallery/Experience-7.jpg" alt="" /> </li> </ul> </section>--> <?php include 'include/footer.php'?> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/slick.min.js"></script> <script src="js/coustom.js"></script> <script src="js/wow.js"></script> <script src="js/menu.js"></script> <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> <script> new WOW().init(); $('.gallery_banner-inner').slick({ dots: true, infinite: true, autoplay:true, speed: 1000, slidesToShow: 1, fade: true, //centerMode: true, //variableWidth: true, arrows: true, responsive: [ { breakpoint: 600, settings: { arrows: false, dots: true } } ] }); </script> </body> </html>

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