Great tutorial. Now, what if, instead of of the img element, my images are a div and use the background-image property in CSS? "lightboxImg.src = image.src" wouldn't work for that, would it?
Glad you enjoyed it! Correct. It depends how your project is set up, but you should be able to get the background image URL with computedstyle (search for that online). If you’re sharing your code somewhere I’m happy to help!
@@CodinginPublic Here's the HTML code for a single image:
Girl With Lion Cub Adobe Photoshop & Adobe Illustrator
I made it an instead of a so that the image can be clickable. But like a , it has a class name, so I can get a background image. Naturally, all I had to do was go to the CSS and make it .one { background-image: url("images/artwork/image1.jpg"); } I see that "lightboxImg.src = image.src" won't work, since I'm not using , but you say that computedstyle can work?
Hey, awesome. Glad you enjoyed it. I don’t remember how the video was set up, but I’d think you could add a data attribute to the image that was clicked and then pull that text into the modal. So if your clicked image had a data attribute like this… data-figcaption=“some really cool text” You should be able to pull it in using… const captionToAdd = e.currentTarget.querySelector.dataset.figcaption; Hope that makes sense. Happy to look at code if I have time.
It could be interesting if you add the next and previous arrow on each picture, so the user doesn‘t have to close the main image to select another. Just UX, especially for mobile devices.
Hey, @Toma! Just a note that I built out an image gallery in response to your suggestion. First part is up ruclips.net/video/K64-o0JgO-s/видео.html Second goes live tomorrow!
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
Excellent, thank you, you make it seem so easy!
Glad it was a help!
u r the best..
Glad you enjoyed it :)
amazing man
Thanks so much for the kind words!
Awesome!
Great tutorial. Now, what if, instead of of the img element, my images are a div and use the background-image property in CSS? "lightboxImg.src = image.src" wouldn't work for that, would it?
Glad you enjoyed it! Correct. It depends how your project is set up, but you should be able to get the background image URL with computedstyle (search for that online). If you’re sharing your code somewhere I’m happy to help!
@@CodinginPublic Do you mind if I share my code here? It's only a snippet.
Sure! It may be I need more context than a snippet, but go for it and we’ll see!
@@CodinginPublic Here's the HTML code for a single image:
Girl With Lion Cub
Adobe Photoshop & Adobe Illustrator
I made it an instead of a so that the image can be clickable. But like a , it has a class name, so I can get a background image. Naturally, all I had to do was go to the CSS and make it
.one { background-image: url("images/artwork/image1.jpg"); }
I see that "lightboxImg.src = image.src" won't work, since I'm not using , but you say that computedstyle can work?
that is a one awesome tutorial I have one question how can we add a text below the img when it pop up
Hey, awesome. Glad you enjoyed it. I don’t remember how the video was set up, but I’d think you could add a data attribute to the image that was clicked and then pull that text into the modal.
So if your clicked image had a data attribute like this…
data-figcaption=“some really cool text”
You should be able to pull it in using…
const captionToAdd = e.currentTarget.querySelector.dataset.figcaption;
Hope that makes sense. Happy to look at code if I have time.
@@CodinginPublic thank you but that did not work for me I'll figure it out
It could be interesting if you add the next and previous arrow on each picture, so the user doesn‘t have to close the main image to select another. Just UX, especially for mobile devices.
Thanks, @Toma. That’s a helpful addition. I’ll work on another version with that functionality. Thanks for the suggestion!
Hey, @Toma! Just a note that I built out an image gallery in response to your suggestion. First part is up ruclips.net/video/K64-o0JgO-s/видео.html
Second goes live tomorrow!
@@CodinginPublic Really, thanks, I will check it!🧡