1#@!#!123s

: / home3 / encodto1 / adanfix.encodersunlimited.com /
Filename : gallery.php
back
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Adanfix - Gallery</title>

<!-- favicon icon -->
<link rel="shortcut icon" href="images/favicon.png" />

<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

<!-- animate -->
<link rel="stylesheet" type="text/css" href="css/animate.css"/>

<!-- fontawesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>

<!-- themify -->
<link rel="stylesheet" type="text/css" href="css/themify-icons.css"/>

<!-- slick -->
<link rel="stylesheet" type="text/css" href="css/slick.css">

<link rel="stylesheet" type="text/css" href="css/slick-theme.css">

<!-- megamenu -->
<link rel="stylesheet" type="text/css" href="css/megamenu.css">

<!-- shortcodes -->
<link rel="stylesheet" type="text/css" href="css/shortcodes.css"/>

<!-- main -->
<link rel="stylesheet" type="text/css" href="css/main.css"/>

<!-- responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">


<style>
    a {
  text-decoration: none;
  cursor: pointer;
  outline: 0;
}

.section-padding {
  padding-top: 80px;
}

.gallery-section {
  position: relative;
  z-index: 1;
}

.title {
  font-size: 46px;
  font-weight: 700;
  font-family: "Playfair Display", serif;
  color: #000000;
} 

.filter {
  text-align: center;
  max-width: 1050px;
  margin: auto;
}

.btn {
  padding: 10px 20px;
  margin: 5px 4px 4px 0;
  display: inline-block;
  color: #003;
  background: #f7f30d;
  background: #eb8205;
  border: 1px solid #f44336;
  transition: all 0.4s;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
}
.btn:hover,.btn-active {
  background: #eb8205;
  color: #fff;
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}
.gallery {
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 1320px;
  flex-wrap: wrap;
  margin: 25px auto;
  /* gap: 14px; */
}
.gallery a {
  display: flex;
}
.gallery img {
  width: 200px;
  height: 220px;
  object-fit: cover;
  transition: 0.3s ease-in-out;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 10px;
}

.gallery img:hover {
  transform: scale(1.1);
}

.sets .hide,
.sets .pophide {
  width: 0%;
  opacity: 0;
}

.closeBtn {
  position: absolute;
  font-size: 22px;
  font-weight: 500;
  right: 25px;
  top: 25px;
  color: white;
  transition: 0.5s linear;
  padding: 8px 40px;
  border-radius: 25px;
  background: #eb8205;
  outline-offset: -6px;
  outline: 2px solid #fff;
}
.closeBtn:hover {
  cursor: pointer;
  background: white;
  color: black;
  outline: 2px solid #000;
}

.openDiv {
  width: 100%;
  height: 100vh;
  background: #000000e7;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 0;
  z-index: 9999;
}
.imgPreview {
  width: 70%;
  object-fit: scale-down;
  max-height: 40vw;
  height: auto;
}
.prevButton,
.nextButton {
  transition: 1s linear;
  padding: 10px 35px;
  font-size: 18px;
  border: none;
  color: white;
  background: #0005;
  border-radius: 10px;
  border: 1px solid white;
  margin: 10px;
}
.prevButton:hover,
.nextButton:hover {
  background: #fff;
  color: black;
}

/* resposive CSS Code */

@media (max-width : 1199px) {
  .section-padding {
    padding-top: 70px;
  }
}
@media (max-width: 991px) {
  .section-padding {
    padding-top: 50px;
  }
}
@media (max-width: 767px) {
  .title {
    font-size: 36px;
  }
  .gallery img {
    margin: 8px 8px;
    width: 175px;
  }
  .closeBtn {
    padding: 6px 25px;
  }
  .prevButton,
  .nextButton {
    font-size: 18px;
    padding: 8px 25px;
  }
}

@media (max-width: 540px) {
  .section-padding {
    padding-top: 30px;
  }
  
  .gallery img {
    margin: 8px 6px;
    width: 155px;
  }

  .closeBtn {
    font-size: 18px;
    border-radius: 15px;
  }
  .prevButton,
  .nextButton {
    font-size: 18px;
    padding: 6px 20px;
    border-radius: 10px;
    margin: 5px;
  }

  .imgPreview {
    width: 90%;
    max-height: 50vh;
    height: auto;
  }
  
}
</style>


</head>

<body>

    <!--page start-->
    <div class="page">

        <!--header start-->
<?php 

include 'header.php'

?>


        <!-- page-title -->
        <div class="ttm-page-title-row">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="page-title-heading">
                                <h1 class="title">Gallery</h1>
                            </div>
                            <div class="breadcrumb-wrapper">
                                <span class="mr-1"><i class="ti ti-home"></i></span>
                                <a title="Homepage" href="index.html">Home</a>
                                <span class="ttm-bread-sep">&nbsp;/&nbsp;</span>
                                <span class="ttm-textcolor-skincolor">Gallery</span>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>                    
        </div><!-- page-title end-->


    <!--site-main start-->
    <div class="site-main">

            
      <div class="section-padding gallery-section" id="gallery">
        <div class="container">
          

          <div id="btncontainer" class="filter">
            <a class="btn btn-active" href="#all">ALL</a>
            <a class="btn" href="#adh">Adhesives</a>
            <a class="btn" href="#ws">Waterproof Solutions</a>
          </div>

          <!-- Gallery Section Start -->

          <div class="gallery sets">
            <a class="all adh"><img src="images/product/adhesive/adn1.png"/></a>

            <a class="all adh"><img src="images/product/adhesive/adn2.png"/></a>

            <a class="all adh"><img src="images/product/adhesive/adn3.png"/></a>
            <a class="all adh"><img src="images/product/adhesive/adn4.png"/></a>
            
            <a class="all ws"><img src="images/product/waterproofing/sbr_latex_bond.png"/></a>
            
            <a class="all ws"><img src="images/product/waterproofing/iw++.png"/></a>
            
  
            
          </div>
        </div>
      </div>
        
       
       

    </div><!--site-main end-->


        <!--footer start-->
 <?php  include 'footer.php'  ?>

    <script>
        $(".filter a").click(function (e) {
        e.preventDefault();
        var a = $(this).attr("href");
        a = a.substr(1);
        $(".sets a").each(function () {
          if (!$(this).hasClass(a) && a != "") $(this).addClass("hide");
          else $(this).removeClass("hide");
        });

    

// Add active class to the current button (highlight it)
    var btnContainer = document.getElementById("btncontainer");
    var btns = btnContainer.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
        var current = document.getElementsByClassName("btn-active");
        current[0].className = current[0].className.replace(" btn-active", "");
        this.className += " btn-active";

    }
});


let imgs = document.querySelectorAll("img");
      let count;
      imgs.forEach((img, index) => {
        img.addEventListener("click", function (e) {
          if (e.target == this) {
            count = index;
            let openDiv = document.createElement("div");
            let imgPreview = document.createElement("img");
            let butonsSection = document.createElement("div");
            butonsSection.classList.add("butonsSection");
            let closeBtn = document.createElement("button");
            let nextBtn = document.createElement("button");
            let prevButton = document.createElement("button");
            prevButton.innerText = "Previous";
            nextBtn.innerText = "Next";

            nextBtn.classList.add("nextButton");
            prevButton.classList.add("prevButton");
            nextBtn.addEventListener("click", function () {
              if (count >= imgs.length - 1) {
                count = 0;
              } else {
                count++;
              }

              imgPreview.src = imgs[count].src;
            });

            prevButton.addEventListener("click", function () {
              if (count === 0) {
                count = imgs.length - 1;
              } else {
                count--;
              }

              imgPreview.src = imgs[count].src;
            });

            closeBtn.classList.add("closeBtn");
            closeBtn.innerText = "Close";
            closeBtn.addEventListener("click", function () {
              openDiv.remove();
            });

            imgPreview.classList.add("imgPreview");
            imgPreview.src = this.src;

            butonsSection.append(prevButton, nextBtn);
            openDiv.append(imgPreview, butonsSection, closeBtn);

            openDiv.classList.add("openDiv");

            document.querySelector("body").append(openDiv);
          }
        });
      });
    </script>

</body>

</html>