Saturday, August 31, 2013

AngularJS Lightbox directive

I was using lightbox2 in an AngularJS app and realized that it was pretty difficult to customize it.
The requirements were very simple,
  1. editing the album name/ picture description
  2. deleting album/picture 
  3. different overlay than the usual title below/above the image
Although the last one I would have found support in some library or the other if I searched but the first two needed to have callbacks to my AngularJS app. This prompted me to write a directive which could be easily configured/customized.

I made use of AngularUI modal since that was already used in my app. Besides, as they say, no point in rewriting stuff that's already there.

The usage is pretty simple,
<lightbox images="album"></lightbox>

where album is an array of image details. A sample image detail object would be
{src: "/path/to/img", header: "the data/info that should be displayed above the image", description: "the info to be displayed beside the image"}

The header and the description can also be HTML strings. The dimensions in tile view are 150px x 150px by default. 

The directive can be customized/configured to handle various cases (inline editing using contenteditable, delete, change tile size, background, etc)