jblightbox / by Joel Bramley


A simple javascript lightbox

For this site I made up my own lightbox that turns any link to an image (via href) into a JS one that executes the lightbox.
Features of the lightbox:
  • Automatically redo links to images to work with JBLightbox
  • Auto resize images to fit in window/screen
  • If native image size is larger than the lightbox display an option to view the original size is provided
  • Works with keyboard (Esc closes, left and right arrow keys scroll through images)
  • Uses Image Alt or A Title attributes in the lightbox preview
  • Cross browser/os (inc IOS/Android) compatibility
  • Just add one line of code to your page and let JBLightbox do the rest.

Code Updates:
20130410 - Fixes to allow compatibility with IE 8 and below.


This is still a work in progress but it is currently functional, it is free to use, if it works for you and you want to donate something you can do so via paypal below :)


Code is running on the page, it does not style the gallery, this is done outside of the script.

Select any image/link below to see it in action.
Text link to a Sunrise Photo Chinese Gardens Arch The Cascades The Cascades Chilies Rose Petal
To use simply grab the JBLightbox Code (ie download it) and insert at the bottom of your page e.g


<script src="jblightbox.js"></script>Below is all the HTML you need to get the lightbox working <a class="photos" href="[Img URL]"> <img alt="[Img Alt]" src="[Img URL]" /> </a> <a class="photos" href="[Img URL]"> <img alt="[Img Alt]" src="[Img URL]" /> </a> <a class="photos" href="[Img URL]"> <img alt="[Img Alt]" src="[Img URL]" /> </a> <a class="photos" href="[Img URL]"> <img alt="[Img Alt]" src="[Img URL]" /> </a> <a class="photos" href="[Img URL]"> <img alt="[Img Alt]" src="[Img URL]" /> </a> <a class="photos" href="[Img URL]"> <img alt="[Img Alt]" src="[Img URL]" /> </a>