Glr.js lightbox

0.0.1 - Alpha

Basic Usage:

The bare minimum for using glr.js on a web page:

In <head> :

<script src="https://glr.bezdekajakub.cz/glr.js"></script>
<link rel="stylesheet" href="https://glr.bezdekajakub.cz/glr.css" defer>

Before: </body> :

<script>let glr = new Glr()</script>

Apply data-glr to <a> link:

<a href="http://satyr.io/1200x800/" data-glr>
    <img src="http://satyr.io/120x80">
</a>

Custom settings:

Above is all settings with default values

<script>
    let glr = new Glr({
        showCover: true,             // on / off blurred background image
        galleryRepeat: false,        // on / off gallery repeating
        backgroundColor: "#000000",  // set background color
        navigationColor: "#ffffff"   // set navigation color
    })
</script>

Full example:

<a href="http://satyr.io/1200x800/" 
    data-glr="category-1" 
    data-glr-title="Title of image" 
    data-glr-desc="Description of image"
>
    <img src="http://satyr.io/120x80">
</a>

Multiple galleries on one page:

By default, all images is in one default category.
By adding some value to data-glr, will be this image in separate gallery.

<a href="http://satyr.io/1200x800/" data-glr="category-1"> ...

Example: