Image Gallery Lightbox Usage Instructions

  1. Load CSS
  2. Load JS
  3. <a href="PATH_TO_IMAGE" data-lightbox="IMAGE_ID"><img src="PATH_TO_IMAGE_THUMB" alt="" /></a>
  4. All items that have the same IMAGE_ID will display "Image X of Y" and have forward and backward arrows to navigate through them.
  5. data-title="IMAGE_TITLE" is an optional element on the <a> tag, and will display on the overlay.

Further reading and additional options: