# pi-gallery

> Dependency-free lightbox image gallery

Latest version **1.0.0** (published 2018-11-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install pi-gallery
pnpm add pi-gallery
yarn add pi-gallery
bun add pi-gallery
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-11-12 |
| First published | 2018-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 74.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Piotr Golczyk |
| Maintainers | pete-gi |
| Keywords | dependency, free, gallery, lightbox |

## Links

- npm: https://www.npmjs.com/package/pi-gallery
- Repository: https://github.com/pete-gi/pi-gallery
- Homepage: https://github.com/pete-gi/pi-gallery#readme
- Issues: https://github.com/pete-gi/pi-gallery/issues
- npm.io page: https://npm.io/package/pi-gallery

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [post-robot](https://npm.io/package/post-robot.md) — 93.7K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-11-12

## README

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

## Instalation
To install using [npm](https://www.npmjs.com/get-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

---
_Source: https://npm.io/package/pi-gallery · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._