Minimal vanilla js lightbox for images
<head>
<link rel="stylesheet" href="lightbox.css">
</head>
<body>
<div class="lightbox"></div>
<img src="image.jpg" onclick="lightbox.load('image.jpg')">
<script src="lightbox.js"></script>
<script>
let lightbox = new Lightbox();
lightbox.install(document.querySelector('.lightbox'), 'lightbox');
</script>
</body>
<script>
let lightbox = new Lightbox();
lightbox.install(container, 'prefix');
</script>
| param | description |
|---|---|
| container | containing div for lightbox to use |
| prefix | css class name prefix for 'x-img' and 'x-back' |
<img src='image.jpg' class='image'>
<script>
let image = document.querySelector(".image");
lightbox.handle(image, image.src);
</script>
or
<script>
let image = document.createElement('img');
image.src = 'image.jpg';
this.addEvent(image, 'click', function(){ lightbox.load('image.jpg'); });
document.body.appendChild(image);
</script>
or
<img src='image.jpg' class='image'>
<script>
let image = document.querySelector(".image");
image.addEventListener('click', function(){ lightbox.load('image.jpg') });
</script>
or
<img src="image.jpg" onclick="lightbox.load('image.jpg')">
etc
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent