logo DevAnswer - Developers Answer

HTML Thumbnail with Image Preview on Click

15th November

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
html, body, .full {
  width:100%;
  height:100%; 
  font-size:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}
.gallery {
  opacity:0;
  text-align:center;
  background-color:#fff;
  min-height:100vh;
}
.box {
  cursor:pointer;
  position:relative;
  display:inline-block;
  width:200px;
  height:300px;
  margin:75px;
  overflow:hidden;
}
.follower {
  cursor:pointer;
  pointer-events:none;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.75);
  width:90px;
  height:90px;
  border-radius:50%;
  z-index:1000;
}
.follower p {
  color:#fff;
  font-size:15px;
  text-align:center;
  line-height:0;
  letter-spacing:0.5px;
  margin-top:50%;
  user-select:none;
}
.follower .txt2 {
  display:none;
}
.full {
  position:fixed;
  top:0;
  display:none;
  background:#fff;
  z-index:100;
}
.fullImg {
  pointer-events:none;
  position:absolute;
  max-width:90%;
  max-height:90%;
  top:50%;
  left:50%;    
  transform:translate(-50%, -50%);
}
.prev, .next {
  cursor:pointer;
  background-color:#ddd;
  color:#fff;
  font-size:30px;
  line-height:0;
  position:absolute;  
  width:100px;
  height:50px;
  top:50%;
  transform:translateY(-50%);
  padding-top:50px;
}
.next {
  right:0;
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script>
<div class="gallery">
  <div class="full">
    <img class="fullImg" src="" />
    <div class="prev"> &#x2190 </div>
    <div class="next"> &#x2192 </div>    
  </div>
  <div class="follower">
    <p class="txt1">Explore</p>
    <p class="txt2">Close</p>    
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
let current = "",
    imgArr = [];
for (let i = 0; i < 6; i++) {
    const img = document.createElement("img"),
        box = document.createElement("div");
    img.draggable = false;
    img.src = "https://picsum.photos/id/" + (i + 50) + "/400/600";
    imgArr.push(img.src);
    gsap.set(img, { attr: { class: "img" }, width: 200, height: 300 });
    gsap.set(box, { attr: { class: "box", id: "box" + i } });
    box.appendChild(img);
    $(".gallery").append(box);
}
gsap.set(".follower", { scale: 0 });
gsap.set(".gallery", { opacity: 1 });
$(".gallery").on("mousemove", (e) => {
    gsap.to(".follower", {
        duration: 0.3,
        x: e.clientX - 45,
        y: e.clientY - 53
    });
});
$(".box").on("mouseover", (e) => {
    if (gsap.isTweening(".full")) return;
    const box = e.currentTarget,
        img = box.firstChild;
    gsap.to(".follower", { duration: 0.2, scale: 1 });
    gsap.to(".gallery", {
        duration: 1,
        ease: "power2.inOut",
        backgroundColor: "#ddd"
    });
    gsap.to(".box", {
        opacity: (i, t) => (t == box ? 1 : 0.3),
        ease: 'power1.inOut'
    });
    gsap.to(img, { scale: 1.1, duration: 6, ease: "expo" });
    //smoothes jitters in FF
    gsap.to(img, {
        rotation: 0.05,
        yoyo: true,
        repeat: 5,
        duration: 1,
        ease: 'none'
    });
});
$(".box").on("mouseout", (e) => {
    if (current === "") {
        gsap.to(".follower", {
            duration: 0.15,
            ease: "power1.in",
            scale: 0
        });
    }
    gsap.to(".gallery", {
        duration: 1,
        backgroundColor: "#fff"
    });
    gsap.to(".img", { scale: 1, overwrite: true, duration: 0.3 });
    gsap.to(".box", { opacity: 1, ease: "power1.inOut" });
});
$(".box").on("click", (e) => {
    if (gsap.isTweening(".full")) return;
    current = Number(e.currentTarget.id.substr(3));
    gsap
        .timeline()
        .set(".fullImg", { attr: { src: imgArr[current] } })
        .set(".full", { display: "block" })
        .fromTo(".full", { y: "100vh" }, { duration: 0.6, y: 0, ease: "expo.inOut" })
        .fromTo(".fullImg", { opacity: 0 }, { duration: 0.4, opacity: 1, ease: "sine.inOut" }, 0.4)
        .fromTo(".prev", { x: -100 }, { duration: 0.6, x: 0, ease: "power4" }, 0.4)
        .fromTo(".next", { x: 100 }, { duration: 0.6, x: 0, ease: "power4" }, 0.4);
    gsap
        .timeline({ defaults: { duration: 0.25, ease: "power1.inOut" } })
        .to(".txt1", { opacity: 0 })
        .set(".txt1", { display: "none" })
        .set(".txt2", { display: "block", opacity: 0 })
        .to(".txt2", { opacity: 1 });
});
$(".full").on("click", (e) => {
    if (gsap.isTweening(".full")) return;
    if ($(e.target).hasClass("prev") || $(e.target).hasClass("next")) return;
    current = "";
    gsap.timeline()
        .to(".follower", { duration: 0.15, ease: "power1.in", scale: 0 }, 0)
        .to(".prev", { duration: 0.2, ease: "power1.in", x: -100 }, 0)
        .to(".next", { duration: 0.2, ease: "power1.in", x: 100 }, 0)
        .to(".fullImg", { duration: 0.4, opacity: 0, ease: "sine.inOut" }, 0)
        .to(".full", { duration: 0.4, y: "-100vh", ease: "power3.in" }, 0.3)
        .fromTo(".gallery", { backgroundColor: '#ccc' }, { duration: 0.5, backgroundColor: "#fff", ease: "power2.inOut" }, 0.5)
        .fromTo(".box", { opacity: 0 }, { duration: 0.3, opacity: 1, ease: "sine.inOut" }, 0.6)
    gsap.timeline({ defaults: { duration: 0.25, ease: "power1.inOut" } })
        .to(".txt2", { opacity: 0 })
        .set(".txt2", { display: "none" })
        .set(".txt1", { display: "block", opacity: 0 })
        .to(".txt1", { opacity: 1 });
});
$(".prev, .next").on("mouseover", (e) => {
    gsap.to(".follower", {
        duration: 0.15,
        scale: 0
    });
    gsap.to(e.currentTarget, {
        duration: 0.3,
        backgroundColor: "#eee",
        color: "#aaa"
    });
});
$(".prev, .next").on("mouseout", (e) => {
    gsap.to(".follower", {
        duration: 0.15,
        scale: 1
    });
    gsap.to(e.currentTarget, {
        duration: 0.6,
        backgroundColor: "#ddd",
        color: "#fff"
    });
});
$(".prev, .next").on("click", (e) => {
    if (gsap.isTweening(".fullImg")) return;

    if ($(e.target).hasClass("prev")) {
        (current > 0) ? current-- : current = imgArr.length - 1;
    }
    if ($(e.target).hasClass("next")) {
        (current >= imgArr.length - 1) ? current = 0 : current++;
    }
    gsap.timeline()
        .to(".fullImg", { duration: 0.3, opacity: 0, ease: "sine.inOut" }, 0)
        .set(".fullImg", { attr: { src: imgArr[current] } })
    $('.fullImg').on('load', (e) => {
        $('.fullImg').off('load');
        gsap.fromTo(".fullImg", { opacity: 0 }, { duration: 0.4, opacity: 1, ease: "sine.inOut" });
    })
});
</script>

</body>
</html>                        



Other Codes