56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
document.querySelectorAll(".gallery").forEach(item => {
|
|
// Switch to gallery-js stylesheet
|
|
item.className = "gallery-js";
|
|
|
|
// Create the spotlight container
|
|
let spot = document.createElement('div');
|
|
spot.className = "gallery-spot";
|
|
spot.style.display = "none";
|
|
spot.appendChild(item.firstElementChild.cloneNode(true));
|
|
item.after(spot);
|
|
|
|
// Add some logic
|
|
// item.addEventListener("click", function(e) {
|
|
// console.log(e.target);
|
|
// console.log(e.currentTarget);
|
|
// // Select the clicked media
|
|
// Array.from(item.children).forEach(child => {
|
|
// child.classList.remove('selected');
|
|
// });
|
|
// e.target.classList.add('selected');
|
|
//
|
|
// // Display the current
|
|
// e.currentTarget.nextElementSibling.querySelector('div').innerHTML = e.target.outerHTML;
|
|
// });
|
|
});
|
|
|
|
document.querySelectorAll(".gallery-js > *").forEach(item => {
|
|
item.addEventListener("click", function(e) {
|
|
console.log(e.target);
|
|
// Manage selected media
|
|
if(e.target.classList.contains('selected')) {
|
|
e.target.classList.remove('selected');
|
|
} else {
|
|
e.target.classList.add('selected');
|
|
}
|
|
Array.from(e.target.parentElement.children).forEach(el => {
|
|
if(el != e.target) el.classList.remove('selected');
|
|
});
|
|
|
|
// Change content of spotlight
|
|
let spot = e.target.parentElement.nextElementSibling;
|
|
spot.replaceChild(e.target.cloneNode(true), spot.firstElementChild);
|
|
// Open spotlight media in a new tab
|
|
spot.firstElementChild.addEventListener("click", function(e) {
|
|
window.open(spot.firstElementChild.src, "_blank");
|
|
});
|
|
|
|
// Display the spotlight
|
|
if(e.target.classList.contains('selected')) {
|
|
spot.style.display = "flex";
|
|
} else {
|
|
spot.style.display = "none";
|
|
}
|
|
});
|
|
});
|