Simple Image Lightbox Tutorial
Image lightboxes are incredibly popular, especially in portfolio websites. Luckily, implementing a lightbox is much easier than it looks. In this video I will be breaking down exactly what a lightbox is and how to set one up using HTML, CSS, and JavaScript. I will also be discussing exactly why I write each line of code as well as potential alternative options as I go. By the end of this video you will have a fully working lightbox example ready to add into your own applications.
📚 Materials/References:
CSS Grid Tutorial: • Learn CSS Grid in 20 Minutes
Defer vs Async Tutotorial: • What Is The Fastest Way To Load JavaScript
GitHub Code: https://github.com/WebDevSimplified/L...
CodePen Code: https://codepen.io/WebDevSimplified/p...
🧠 Concepts Covered:
How to dynamically create HTML elements
How position fixed works
Showing/hiding HTML elements
Setting up event listeners
CSS grid
🌎 Find Me Here:
My Website: https://webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#Lightbox #WDS #ImageLightbox
On this page of the site you can watch the video online Simple Image Lightbox Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Web Dev Simplified 31 August 2019, share the link with friends and acquaintances, this video has already been watched 88,205 times on youtube and it was liked by 2.1 thousand viewers. Enjoy your viewing!
