Lightbox is a javascript library that displays images and videos by filling the screen, and dimming out the rest of the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
}
*{
box-sizing: border-box;
}
.row>.column{
padding: 0 8px;
}
.row:after{
content: " ";
display: table;
clear: both;
}
.column{
float: left;
width: 25%;
}
/*tHIS IS for modal background*/
.modal{
/*display: none;*/
position: fixed;
z-index: 1;
padding-top:50px ;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #b0d7c5;
}
.modal-content{
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/*This is for close button*/
.close{
color: black;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus{
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides{
display: none;
}
.cursor{
cursor: pointer;
}
/*This is for next and prev buttons*/
.prev,
.next{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20x;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover{
background-color: rgba(0, 0, 0, 0.8);
}
.numbertext{
color:black;
font-size: 12px;
padding: 8px 12px;
top: 0;
}
img{
margin-bottom: -4px;
}
.caption-container{
text-align: center;
background-color: #00b867;
padding: 2px 16px;
color: white;
}
.demo{
opacity: 0.6;
}
.active,
.demo:hover{
opacity: 1;
}
img.hover-shadow{
transition: 0.3s;
}
.hover-shadow:hover{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="tiger1.jpg" alt="" style="width: 100%; " onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="tiger5.jpg" alt="" style="width: 100%; " onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="tiger7.jpg" alt="" style="width: 100%; onclick="openModal() currentSlide(3);" class="hover-shadow cursor">
</div>
</div>
<!--Unicode character for Sign "X" is '×'-->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1/3</div>
<img src="tiger8.jpg" alt="" style="width: 100%; ">
</div>
<div class="mySlides">
<div class="numbertext">2/3</div>
<img src="tiger5.jpeg" alt="" style="width: 100%; ">
</div>
<div class="mySlides">
<div class="numbertext">3/3</div>
<img src="tiger7.jpg" alt="" style="width: 100%; ">
</div>
<!--Unicode character for "
prev " sign "<" is '𚸎'-->
<a class="prev" onclick="plusSlides(-1)" >❮</a>
<!--Unicode character for "
prev " sign ">" is '𚸏'-->
<a class="next" onclick="plusSlides(1)" >❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="tiger8.jpg" alt="tiger1" style="width: 100%;" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="tiger5.jpeg" alt="tiger2" style="width: 100%;" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="tiger7.jpg" alt="tiger3" style="width: 100%;" onclick="currentSlide(3)">
</div>
</div>
</div>
<script>
function openModal(){
document.getElementById('myModal').style.display="block";
}
function closeModal(){
document.getElementById('myModal').style.display="none";
}
var slideIndex=1;
showSlides(slideIndex);
function plusSlides(n){
showSlides(slideIndex+=n);
}
function currentSlide(n){
showSlides(slideIndex=n);
}
function showSlides(n){
var i;
var slides=document.getElementsByClassName("mySlides");
var dots=document.getElementsByClassName("demo");
var captionText= document.getElementById("caption");
if(n>slides.length){
slideIndex=1
}
if(n<1){
slideIndex=slides.length
}
for(i=0; i<slides.length;i++){
slides[i].style.display="none";
}
for(i=0; i<dots.length;i++){
dots[i].className=dots[i].className.replace(" active","");
}
slides[slideIndex-1].style.display="block";
dots[slideIndex-1].className+=" active";
captionText.innerHTML=dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Comments
Post a Comment