Instantly share code, notes, and snippets.
Created
April 30, 2022 09:34
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save iamrealfarhanbd/ba961c49debad8443e22f9c93e084b5e to your computer and use it in GitHub Desktop.
Learn how to create a modal image gallery (lightbox) with CSS and JavaScript:-This is a a slideshow of images where if you click a button then the button will popup the one image then after press next button the image will start slide
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
.row > .column { | |
padding: 0 8px; | |
} | |
.row:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.column { | |
float: left; | |
width: 25%; | |
} | |
/* The Modal (background) */ | |
.modal { | |
display: none; | |
position: fixed; | |
z-index: 1; | |
padding-top: 100px; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
overflow: auto; | |
background-color: black; | |
} | |
/* Modal Content */ | |
.modal-content { | |
position: relative; | |
background-color: #fefefe; | |
margin: auto; | |
padding: 0; | |
width: 90%; | |
max-width: 1200px; | |
} | |
/* The Close Button */ | |
.close { | |
color: white; | |
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; | |
} | |
/* Next & previous buttons */ | |
.prev, | |
.next { | |
cursor: pointer; | |
position: absolute; | |
top: 50%; | |
width: auto; | |
padding: 16px; | |
margin-top: -50px; | |
color: white; | |
font-weight: bold; | |
font-size: 20px; | |
transition: 0.6s ease; | |
border-radius: 0 3px 3px 0; | |
user-select: none; | |
-webkit-user-select: none; | |
} | |
/* Position the "next button" to the right */ | |
.next { | |
right: 0; | |
border-radius: 3px 0 0 3px; | |
} | |
/* On hover, add a black background color with a little bit see-through */ | |
.prev:hover, | |
.next:hover { | |
background-color: rgba(0, 0, 0, 0.8); | |
} | |
/* Number text (1/3 etc) */ | |
.numbertext { | |
color: #f2f2f2; | |
font-size: 12px; | |
padding: 8px 12px; | |
position: absolute; | |
top: 0; | |
} | |
img { | |
margin-bottom: -4px; | |
} | |
.caption-container { | |
text-align: center; | |
background-color: black; | |
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> | |
<!-- Change Your Title here --> | |
<h2 style="text-align: center;">Image Gallery</h2> | |
<div class="row"> | |
<!-- Change Your Button Tittle --> | |
<div class="column"><button style="width: 100%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">Image One</button></div> | |
<div class="column"><button style="width: 100%;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">Image two</button></div> | |
<div class="column"><button style="width: 100%;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">Image three</button></div> | |
<div class="column"><button style="width: 100%;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">Image four</button></div> | |
</div> | |
<div id="myModal" class="modal"><span class="close cursor" onclick="closeModal()">×</span> | |
<div class="modal-content"> | |
<div class="mySlides"> | |
<!-- Change Your Image title Link --> | |
<div class="numbertext">1 / 4</div> | |
<img src="https://dev-authlabsupport.pantheonsite.io/wp-content/uploads/2019/12/banner-06.jpg" style="width: 100%;" /></div> | |
<div class="mySlides"> | |
<!-- Change Your Image title Link --> | |
<div class="numbertext">2 / 4</div> | |
<img src="https://dev-authlabsupport.pantheonsite.io/wp-content/uploads/2019/12/banner-04.jpg" style="width: 100%;" /></div> | |
<div class="mySlides"> | |
<!-- Change Your Image title Link --> | |
<div class="numbertext">3 / 4</div> | |
<img src="https://dev-authlabsupport.pantheonsite.io/wp-content/uploads/2019/12/banner-05.jpg" style="width: 100%;" /></div> | |
<div class="mySlides"> | |
<!-- Change Your Image title Link --> | |
<div class="numbertext">4 / 4</div> | |
<img src="https://dev-authlabsupport.pantheonsite.io/wp-content/uploads/2019/12/home-new-bg-free-img.jpg" style="width: 100%;" /></div> | |
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> | |
<div class="caption-container"> | |
<p id="caption"></p> | |
</div> | |
<!-- Change Your Image title Link alt text to show bellow--> | |
<div class="column"><img class="demo cursor" src="https://dev-authlabsupport.pantheonsite.io/wp-content/uploads/2019/12/banner-06.jpg" style="width: 100%;" onclick="currentSlide(1)" alt="Your Title of image 1" /></div> | |
<div class="column"><img class="demo cursor" src="https://dev-authlabsupport.pantheonsite.io/wp-content/uploads/2019/12/banner-05.jpg" style="width: 100%;" onclick="currentSlide(2)" alt="Your Title of image 2" /></div> | |
<div class="column"><img class="demo cursor" src="https://dev-authlabsupport.pantheonsite.io/wp-content/uploads/2019/12/banner-04.jpg" style="width: 100%;" onclick="currentSlide(3)" alt="Your Title of image 3" /></div> | |
<div class="column"><img class="demo cursor" src="https://dev-authlabsupport.pantheonsite.io/wp-content/uploads/2019/12/home-new-bg-free-img.jpg" style="width: 100%;" onclick="currentSlide(4)" alt="Your Title of image 4" /></div> | |
</div> | |
<!-- Change Your Image title Link --> | |
</div> | |
<script> | |
/** | |
* -------------------------------xxxxxxxxxxxx--------------------------------- | |
* Warning- if you use same class id then it will conflict with every slideshow | |
* so please when you duplicate all the code then must change the class and id | |
* -------------------------------xxxxxxxxxxxx--------------------------------- | |
*/ | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment