Howto

How To Create Light Box Using Html, Css, And Javascript

How To Create Light Box Using Html, Css, And Javascript

What is a Light Box?

Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.

The original JavaScript library was written by Lokesh Dhakar with the help of riphath.The term Lightbox may also refer to other similar JavaScript libraries. The technique gained widespread popularity due to its simple and elegant style.

The original Lightbox library used two JavaScript libraries, Prototype Javascript Framework and script.aculo.us, for its animations and positioning. In April 2012, the plugin was rewritten for jQuery.[5] The open-source nature of Lightbox encouraged developers to modify and fork the code, resulting in plugins such as Colorbox, Magnific Popup, Slimbox or Thickbox.

Lightbox scripts are dependent upon a browser’s JavaScript support, Many Lightbox scripts use unobtrusive JavaScript. Browsers that do not load the script for whatever reason can instead simply load the image as a separate page load, losing the Lightbox effect but still retaining the ability to display the image.

 

Step On How To Create Light Box Using Html, Css, And Javascript

Step 1 Add HTML:

<div class=”row”>

<div class=”column”>

<img src=”img1.jpg” onclick=”openModal();currentSlide(1)” class=”hover-shadow”>

</div>

<div class=”column”>

<img src=”img2.jpg” onclick=”openModal();currentSlide(2)” class=”hover-shadow”>

</div>

<div class=”column”>

<img src=”img3.jpg” onclick=”openModal();currentSlide(3)” class=”hover-shadow”>

</div>

<div class=”column”>

<img src=”img4.jpg” onclick=”openModal();currentSlide(4)” class=”hover-shadow”>

</div>

</div>

 

<div id=”myModal” class=”modal”>

<span class=”close cursor” onclick=”closeModal()”>&times;</span>

<div class=”modal-content”>

 

<div class=”mySlides”>

<div class=”numbertext”>1 / 4</div>

<img src=”Hello.jpg” style=”width:100%”>

</div>

<div class=”mySlides”>

<div class=”numbertext”>2 / 4</div>

<img src=”img_hello.jpg” style=”width:100%”>

</div>

<div class=”mySlides”>

<div class=”numbertext”>3 / 4</div>

<img src=”img_pro.jpg” style=”width:100%”>

</div>

<div class=”mySlides”>

<div class=”numbertext”>4 / 4</div>

<img src=”img_lights_wide.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>

<div class=”column”>

<img class=”demo” src=”img1.jpg” onclick=”currentSlide(1)” alt=”Nature”>

</div>

<div class=”column”>

<img class=”demo” src=”image_r.jpg” onclick=”currentSlide(2)” alt=”Trolltunga”>

</div>

<div class=”column”>

<img class=”demo” src=”img3.jpg” onclick=”currentSlide(3)” alt=”Mountains”>

</div>

<div class=”column”>

<img class=”demo” src=”image_t.jpg” onclick=”currentSlide(4)” alt=”Lights”>

</div>

</div>

</div>

 

 

Step 2 Add CSS:

.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;

}

/* 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;

}

.caption-container {

text-align: center;

background-color: black;

padding: 2px 16px;

color: white;

}

img.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)

}

 

Step 3 Add JavaScript:

<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>

 

 

credit: http://www.w3schools.com/


P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top