Skip to content

Instantly share code, notes, and snippets.

@vielhuber

vielhuber/index.html

Created December 28, 2018 00:18
Show Gist options
  • Save vielhuber/6bb460e96c42031d96d09f7a29bb6e7a to your computer and use it in GitHub Desktop.
Save vielhuber/6bb460e96c42031d96d09f7a29bb6e7a to your computer and use it in GitHub Desktop.
Download ZIP
lightbox lightgallery without dependencies that works without manipulating the dom #js
Raw
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"
/>
<title>.</title>
<link type="text/css" rel="stylesheet" href="dist/css/lightgallery.css" />
<script src="dist/js/lightgallery.min.js"></script>
<script>
window.addEventListener('load', e => {
document.addEventListener('click', e => {
if (e.target.closest('.lightgallery') !== null) {
let el = e.target.closest('.lightgallery');
// destroy old instance
if (
window.lgData &&
document.body.getAttribute('lg-uid') in window.lgData
) {
window.lgData[document.body.getAttribute('lg-uid')].destroy(true);
}
let elements = [],
group = el.getAttribute('data-lightgallery-group'),
index = 0;
document
.querySelectorAll('[data-lightgallery-group="' + group + '"]')
.forEach((el2, key) => {
if (el === el2) {
index = key;
}
elements.push({
src: el2.getAttribute('href'),
thumb: el2.getAttribute('href')
});
});
lightGallery(document.body, {
index: index,
dynamic: true,
dynamicEl: elements
});
e.preventDefault();
}
});
});
</script>
</head>
<body>
<a class="lightgallery" data-lightgallery-group="1" href="1.jpg"> <img src="1.jpg" /> </a>
<a class="lightgallery" data-lightgallery-group="1" href="2.jpg"> <img src="2.jpg" /> </a>
<a class="lightgallery" data-lightgallery-group="1" href="3.jpg"> <img src="3.jpg" /> </a>
<a class="lightgallery" data-lightgallery-group="2" href="4.jpg"> <img src="4.jpg" /> </a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment