How To

This tool has only been designed to display pictures, it should work on desktop and smartphones.

You will have to include jQuery or ZeptoJs in your HTML file in order to make it work.

Two things are required :

zPhotobox.load([".z-photobox", ".z-photobox-2"]);

DOM needs to be ready in order to attach a click event handler on each link with the classes provided.

Keyboard shortcuts

The gallery way

One of the most usual use is a gallery, made with Z-GRID, an extremly lightweight grid system I made.

(emmet syntaxe)


Here, only the gallery of images with the ".z-photobox" class on their link will be in the z-photobox

The button way

You can display a gallery without displaying the images. You must create a link for each picture but display only one.

For example :

a.button.z-photobox-2[href=http://lorempixel.com/800/600/cats/1]{Display the gallery!}+a.z-photobox-2[href=http://lorempixel.com/800/600/cats/1$@2][style="display:none"]*5

Display the gallery!

More ...

I know that there is a ton of "lightbox" plugins on the web but I did just want something to show my pictures, very lightweight, and that I would have designed by myself...

Be aware that if the images are not in your browser cache, the loading time will depend on your internet connection and the size of the image. This is why it should be faster with the gallery way.

Please, feel free to create issues on the github repo so that I'll be aware of how I could improve it ;-)