whoami7 - Manager
:
/
home
/
analuakl
/
grinsentertainment.com
/
Upload File:
files >> /home/analuakl/grinsentertainment.com/gallery.php
<!DOCTYPE html> <head> <!-- Basic Page Needs ================================================== --> <title>Grins Entertainment</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- CSS ================================================== --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/main-color.css" id="colors"> </head> <body class="gallery" > <!-- Wrapper --> <div id="wrapper"> <?php include'header.php'?> <div id="titlebar"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Gallery</h2> <!-- Breadcrumbs --> <nav id="breadcrumbs"> <ul> <li><a href="#">Home</a></li> <li>Gallery</li> </ul> </nav> </div> </div> </div> </div> <!-- Container / Start --> <section id="gallery"> <div class="container"> <div id="image-gallery mrb-30"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-6.jpg"><img src="images/gallery-6.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-2.jpg"><img src="images/gallery-2.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-3.jpg"><img src="images/gallery-3.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-4.jpg"><img src="images/gallery-4.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-5.jpg"><img src="images/gallery-5.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-9.jpg"><img src="images/gallery-9.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-7.png"><img src="images/gallery-7.png" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-8.jpg"><img src="images/gallery-8.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-1.jpg"><img src="images/gallery-1.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> <div class="img-wrapper"> <a href="images/gallery-10.jpg"><img src="images/gallery-10.jpg" class="img-responsive"></a> <div class="img-overlay"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </div> </div> </div> </div><!-- End row --> </div><!-- End image gallery --> </div><!-- End container --> </section> <!-- Container / End --> <?php include'footer.php'?> </div> <!-- Wrapper / End --> <!-- Scripts ================================================== --> <script type="text/javascript" src="scripts/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="scripts/jquery-migrate-3.3.2.min.js"></script> <script type="text/javascript" src="scripts/mmenu.min.js"></script> <script type="text/javascript" src="scripts/chosen.min.js"></script> <script type="text/javascript" src="scripts/slick.min.js"></script> <script type="text/javascript" src="scripts/rangeslider.min.js"></script> <script type="text/javascript" src="scripts/magnific-popup.min.js"></script> <script type="text/javascript" src="scripts/waypoints.min.js"></script> <script type="text/javascript" src="scripts/counterup.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="scripts/tooltips.min.js"></script> <script type="text/javascript" src="scripts/custom.js"></script> <script type="text/javascript" src="scripts/typed.js"></script> <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>'); 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> </body> </html>
Copyright ©2021 || Defacer Indonesia