PiGallery

Simple, dependency-free lightbox image gallery with CSS-only animations

Instalation

To install using npm:

npm install pi-gallery

Or just clone/download the repo and do what you want

Setup

Import these files via module bundler

Usage

Create instance of the gallery with selector and optional options

new PiGallery("selector", {options})

You're ready to go!

If you want many galleries on one page, just add different data-pi-gallery attribute values to your gallery items. Here's an example:

<h2>Gallery 1</h2>
    <div class="gallery">
        <a href="path-to-img/image-1.jpg" class="gallery-item" data-pi-gallery="gallery1">
            <img src="path-to-img/thumb-1.jpg" alt="">
        </a>
        <a href="path-to-img/image-2.jpg" class="gallery-item" data-pi-gallery="gallery1">
            <img src="path-to-img/thumb-2.jpg" alt="">
        </a>
        <a href="path-to-img/image-3.jpg" class="gallery-item" data-pi-gallery="gallery1">
            <img src="path-to-img/thumb-3.jpg" alt="">
        </a>
        <a href="path-to-img/image-4.jpg" class="gallery-item" data-pi-gallery="gallery1">
            <img src="path-to-img/thumb-4.jpg" alt="">
        </a>
    </div>

    <h2>Gallery 2</h2>
    <div class="gallery">
        <a href="path-to-img/image-4.jpg" class="gallery-item" data-pi-gallery="gallery2">
            <img src="path-to-img/thumb-4.jpg" alt="">
        </a>
        <a href="path-to-img/image-3.jpg" class="gallery-item" data-pi-gallery="gallery2">
            <img src="path-to-img/thumb-3.jpg" alt="">
        </a>
        <a href="path-to-img/image-2.jpg" class="gallery-item" data-pi-gallery="gallery2">
            <img src="path-to-img/thumb-2.jpg" alt="">
        </a>
        <a href="path-to-img/image-1.jpg" class="gallery-item" data-pi-gallery="gallery2">
            <img src="path-to-img/thumb-1.jpg" alt="">
        </a>
    </div>

Options

animation: 'slide',                     // <String> - Animation name [there's only "slide" right now]
navigation: true,                       // <Boolean> - Show navigation. Can be selector to place navigation in specific parent element
thumbs: true,                           // <Boolean> - Show thumbs
touch: true,                            // <Boolean> - Enable touch support (on mobile)
closeOnOverlayClick: true,              // <Boolean> - Should mouse-clicking on gallery background close it
buttons: [                              // <Array> - List of buttons that should appear in the gallery header
    'close',
],
speed: 3000,                            // <Number> - Animation speed [ms]
classes: {
    activeClass: 'is-active',           // <String> - CSS class for active item
    showingClass: 'is-showing',         // <String> - CSS class for showing animation
    hidingClass: 'is-hiding'            // <String> - CSS class for hiding animation
},

Custom animations

It's pretty straightforward how to create your own animations for PiGallery. Just use the code below, modify it and pass your animation name to the options. The only problem is, you have to create reversed animations as well. Here's a template (SCSS) for that:

.animation-my_animation_name {
    .pi-gallery__item {
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        &.is-showing {
            animation-name: my_animation_name-showing;
            z-index: 2;
        }
        &.is-hiding {
            animation-name: my_animation_name-hiding;
            z-index: 1;
        }
        &.is-active {
            opacity: 1;
            z-index: 3;
        }
    }
    &.animation-reversed {
        .pi-gallery__item {
            &.is-showing {
                animation-name: my_animation_name-showing-reversed;
                z-index: 2;
            }
            &.is-hiding {
                animation-name: my_animation_name-hiding-reversed;
                z-index: 1;
            }
        }
    }
}
@keyframes my_animation_name-showing {
    0% {}
    100% {}
}
@keyframes my_animation_name-hiding {
    0% {}
    100% {}
}
// REVERSED
@keyframes my_animation_name-showing-reversed {
    0% {}
    100% {}
}
@keyframes my_animation_name-hiding-reversed {
    0% { }
    100% {}
}

Just be sure to name everything correctly.

Little info

Hey, it's my second library after a few years of coding. Just saying.

License

MIT