You don’t need jquery or lightbox to create nice images you can click and see larger versions with nice backgrounds.

First we need to add an event lister for every image. We can do this a number of ways but adding it to every image with a specific class is a good way to not think about it after implementing.

Array.prototype.forEach.call(document.getElementsByClassName('js-lightbox'),
  elm => elm.addEventListener('click', lightboxImage))

Then we have to make the mask. I am using the css library tachyons to do this, the main idea is to create a class that would make this element cover the whole screen.

function lightboxImage(evt) {
  evt.preventDefault()

  // create black background
  const mask = document.createElement('div')
  mask.id = 'mask-cover'

  // make it fade in
  mask.style.transition = 'opacity 0.15s ease-in'
  mask.classList.add(
    'fixed',
    'top-0',
    'left-0',
    'w-100',
    'h-100',
    'bg-black-90',
    'flex',
    'items-center',
    'justify-center',
    'o-0',
    'pointer'
  )

Then add the image in and add or remove all the classes that we need.

  //create larger imageview
  const imageView = document.createElement('img')
  imageView.src = evt.target.src
  imageView.classList.add('w-80')

  //@TODO find a better way than having this in a setTimeout
  setTimeout(() => { mask.classList.remove('o-0')}, 0)

  // put image overtop of black background
  mask.appendChild(imageView)

  // draw to page
  document.body.appendChild(mask)
  document.body.classList.add('overflow-hidden')

  // close when clicked
  mask.addEventListener('click', evt => {
    evt.preventDefault()

    // remove mask
    mask.parentNode.removeChild(mask)
    document.body.classList.remove('overflow-hidden')
  })
}