Lightbox Video Tutorial
In this tutorial I suggest you discover how to create a Lightbox in JavaScript. The objective of this code is to allow the user to see a large image without having to leave the current page.
Why not use a bookstore?
One can immediately wonder why not use a third-party library. There are several reasons for this:
- Our needs are quite specific and we risk spending more time finding a library that does what we are looking for than coding the system itself.
- A library will cover a lot of cases that are not necessary in our case, which has a negative impact on the performance and the weight of the library in question.
However, it will suddenly take time to debug our code to ensure that our code works under all conditions (where a library is often tested by the community).
HTML structure
For the HTML structure we will try to keep it as simple as possible with the minimum of elements.
The element .lightbox will be positioned so fixed with an opaque background color. The element .lightbox__container will allow us to properly position the image in the center of the screen thanks to the flexbox system.
{.lightbox__container
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0 50px;
}
For the rest of the elements the placement is done in a classic way and there is not much to say on this point.
The logic
The first step of our script will be to select all the links that lead to images. For that, you just have to find all the links ending in jpg, pNG, jpeg or gif.
addEventListener
During the click we will build the HTML structure of our lightbox and graft the different behaviors.
/ **
* @param {string} url Image URL
* @return {HTMLElement}
* /
buildDOM (url) {
const dom = document.createElement ('div')
dom.classList.add ( 'lightbox')
dom.innerHTML = `
`
dom.querySelector ('. lightbox__close'). addEventListener ('click', this.close.bind (this))
dom.querySelector ('. lightbox__next'). addEventListener ('click', this.next.bind (this))
dom.querySelector ('. lightbox__prev'). addEventListener ('click', this.prev.bind (this))
return dom
}
And we will then start loading the image.
/ **
* @param {string} url Image URL
* /
loadImage (url) {
this.url = null
const image = new Image ()
const container = this.element.querySelector ('. lightbox__container')
const loader = document.createElement ('div')
loader.classList.add ( 'lightbox__loader')
container.innerHTML = ''
container.appendChild (loader)
image.onload = () => {
Container.removeChild (loader)
container.appendChild (image)
this.url = url
}
image.src = url
}
We will keep the url of the displayed image in order to be able to find the position of this image in our gallery for the next and previous navigation.
/ **
* @param {MouseEvent | KeyboardEvent} e
* /
next (e) {
e.preventDefault ()
let i = this.images.findIndex (image => image === this.url)
if (i === this.oquerlength - 1) {
i = -1
}
this.loadImage (this.images (i + 1))
}
/ **
* @param {MouseEvent | KeyboardEvent} e
* /
prev (e) {
e.preventDefault ()
let i = this.images.findIndex (image => image === this.url)
if (i === 0) {
i = this.oquerlength
}
this.loadImage (this.images (i - 1))
}
How to continue?
If you want to push the script written in this video further, here are some avenues to explore:
- Check compatibility on different browsers / devices.
- Block the interface while loading an image (or cancel the previous loading).
- Improve the gallery system by avoiding duplicates and creating a sub-gallery system.
- Improve accessibility using attributes
aria. - Create tests to validate the operation of the lightbox.
