Hi,
I’m going to create Like and Comment system for my image gallery website. I was surfing in pexels.com and saw that when I click on an image, that image is appeared on a lightbox. I want to create such a lightbox and have like/unlike and comments on there. Can I use HTML/CSS for this purpose or do I need to learn Javascript to achieve this lightbox?
Most of the image gallery can be done in HTML/CSS with a little bit of JavaScript. Though you don’t have to use JavaScript at all, but adding comments and like/unlike would make it harder without it. You don’t have to write much code in JavaScript.
Here’s the JavaScript for my website’s gallery - https://phototechguru.com/photogallery.php
const lightbox = document.createElement('div')
lightbox.id = 'lightbox';
document.body.appendChild(lightbox);
const images = document.querySelectorAll('img')
images.forEach(image => {
image.addEventListener('click', () => {
lightbox.classList.add('active')
const divBox = document.createElement('div');
divBox.classList.add('boxStyle')
const img = document.createElement('img');
img.classList.add('imageStyle')
const exif = document.createElement('p');
exif.textContent = image.getAttribute('data-exif');
exif.classList.add('displayInfo');
console.log(exif);
img.src = image.src
while (lightbox.firstChild) {
lightbox.removeChild(lightbox.firstChild)
}
lightbox.appendChild(divBox);
divBox.appendChild(img);
divBox.appendChild(exif);
})
})
lightbox.addEventListener('click', () => {
if (lightbox.hasChildNodes()) {
lightbox.classList.remove('active');
}
})
The CSS is acting a little flaky as I’m switch over the website using Django with Python.
I’m not really following Strider64’s approach unfortunately… (I didnt see like or comment stuff in the gallery example)
but it it were me, and I wanted to add a ‘like’ feature… wouldnt that mean you want to ‘save’ that? and add it to a total or something?
I also think that allowing someone to post a comment is a bit different than adding a ‘like’ option/behavior.
LIKE - approach could easily be done with some minor AJAX/PHP call
COMMENT - approach (I guess technically could also be done using AJAX/JS as well)… but it could also be done by submitting the the page/form as well… and handle the $_POST date like any other form… and just having the comment box at bottom of the page…like most websites/forums/blogs…etc do.
1 Like