Simple lightbox

Developer
Moncho Varela
Size
3,536 Kb
Views
34,408
  1. Simple lightbox Previews
  2. Simple lightbox HTML Codes
  3. Simple lightbox CSS Codes
  4. Simple lightbox JS Codes

How do I make an simple lightbox?

What is a simple lightbox? How do you make a simple lightbox? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.

Simple lightbox Previews
IQ Test

Simple lightbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple lightbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li><a class="lightCustom" href="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/999/small/download?1412714722" title="Example title 1"><img src="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/999/small/download?1412714722" alt="title here" /></a></li> <li><a class="lightCustom" href="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/998/small/download?1412714712" title="Example title 2"><img src="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/998/small/download?1412714712" alt="title here" /></a></li> <li><a class="lightCustom" href="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/996/small/download?1412714686" title="Example title 3"><img src="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/996/small/download?1412714686" alt="title here" /></a></li> <li><a class="lightCustom" href="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/995/small/download?1412714680" title="Example title 4"><img src="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/995/small/download?1412714680" alt="title here" /></a></li> <li><a class="lightCustom" href="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/992/small/download?1412714617" title="Example title 5"><img src="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/992/small/download?1412714617" alt="title here" /></a></li> <li><a class="lightCustom" href="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/990/small/download?1412714581" title="Example title 6"><img src="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/990/small/download?1412714581" alt="title here" /></a></li> <li><a class="lightCustom" href="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/986/small/Reitdiephaven-Groningen-free-license-CC0-314x224.jpg?1412709320" title="Example title 7"><img src="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/986/small/Reitdiephaven-Groningen-free-license-CC0-314x224.jpg?1412709320" alt="title here" /></a></li> <li><a class="lightCustom" href="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/987/small/Alaska-mountain-and-forest-free-license-CC02-314x224.jpg?1412709322" ><img src="http://s3.amazonaws.com/sitebuilderreport-assets/stock_photos/files/000/000/987/small/Alaska-mountain-and-forest-free-license-CC02-314x224.jpg?1412709322" alt="title here" /></a></li>
</ul>
<!-- lightModal -->
<div class="lightModal">	<div class="lightModal-inner">	<button class="lightModal-close" role="button">&times;</button>	<h3 class="lightModal-title">Title here</h3>	<img class="lightModal-image" src="http://placehold.it/350x150" alt="Title here">	</div>
</div>
<!-- / lightModal --> <script src="js/index.js"></script>
</body>
</html>

Simple lightbox - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { margin: 0; padding: 0;
}
/* Demo */
ul { margin: 0; padding: 0; list-style: none;
}
ul li { float: left; display: inline-block; margin: 0; padding: 0; width: 50%;
}
@media (max-width: 450px) { ul li { width: 100%; }
}
ul li a { display: block; position: relative; overflow: hidden; height: 180px;
}
@media (max-width: 450px) { ul li a { height: 100%; }
}
ul li a img { display: block; width: 100%;
}
/* Modal */
.lightModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 0; visibility: hidden; -webkit-transition: all 0.8s ease; transition: all 0.8s ease;
}
.lightModal .lightModal-inner { display: block; width: 75%; height: 75%; margin: 0 auto; padding: 0;
}
.lightModal .lightModal-inner .lightModal-title { font-family: sans-serif; font-weight: 300; color: #777;
}
.lightModal .lightModal-inner .lightModal-close { position: absolute; top: 0.2em; right: 0.2em; background: #FFF; border: none; font-size: 3em; line-height: 1; font-family: serif; color: #464646;
}
.lightModal .lightModal-inner .lightModal-close:hover { color: #f55;
}
.lightModal .lightModal-inner .lightModal-image { display: block; margin: 0 auto; width: 100%; max-height: 95%;
}
.show { opacity: 1; visibility: visible; -webkit-transition: all 0.8s ease; transition: all 0.8s ease;
}

Simple lightbox - Script Codes JS Codes

/*
* Simple light box
* <a href="image.jpg" title="EXample title"></a>
*
*/
// get all links
var links = document.querySelectorAll('.lightCustom'),
// make array
arrayOfLinks = Array.prototype.slice.call(links);
// loop
Array.prototype.forEach.call(arrayOfLinks,function(obj,index){ // open modal on click obj.addEventListener('click',function(e){ e.preventDefault(); // if not title show no title var title = (obj.title) ? obj.title : 'This not have title'; // add class show document.querySelector('.lightModal').classList.add('show'); // add title in modal with title="" document.querySelector('.lightModal-title').innerHTML = title; // get href and add in image modal document.querySelector('.lightModal-image').src = obj.href; // add title in alt image document.querySelector('.lightModal-image').alt = title; }); // close modal document.querySelector('.lightModal-close').addEventListener('click',function(e){ e.preventDefault(); // remove class="show" document.querySelector('.lightModal').classList.remove('show'); // remove title document.querySelector('.lightModal-title').innerHTML = ''; // remove src document.querySelector('.lightModal-image').src = ''; // remove alt document.querySelector('.lightModal-image').alt = ''; });
});
Simple lightbox - Script Codes
Simple lightbox - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 3,536 Kb
Views 34,408
Do you need developer help for Simple lightbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moncho Varela (nakome) Script Codes
Name
Calendar with json events mobile concept
One page theme
Neo minimal theme
Simple Calendar with json events
Background video
Captcha Colors experiment
Simply Redirect to
Get json with data attributes
Welcome
IndexedDB demo
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!