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 :
- a link to each image you want to show with the same class. (for example z-photobox)
- initialise the gallery with some Javascript:
$(document).ready(function(){
zPhotobox.load([".z-photobox", ".z-photobox-2"]);
});
- .ready : the jquery/zepto handler provides the load event for executing code when the page is fully rendered.
- [".z-photobox", ".z-photobox-2"] : The array of class selectors for the galleries. (each class is a different gallery)
DOM needs to be ready in order to attach a click event handler on each link with the classes provided.
Keyboard shortcuts
- left arrow : Previous picture
- right arrow : Next picture
- Escape : Close z-Photobox
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)
.z-grid>.z-3-f*6>a[href=http://lorempixel.com/800/600/nature/$].z-photobox>img[src=http://lorempixel.com/800/600/nature/$]
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
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 ;-)