diff --git a/README.md b/README.md index bac90a5..37af78c 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A slick, yet tiny lightbox gallery for Vue.js - **Slick.** No excessive design. Pictures, thumbnails, controls. -- **Tiny.** Dependency-free. Less than 3 KB minified and gzipped. +- **Tiny.** Dependency-free. 3 KB minified and gzipped. - **Adaptive.** Works on computers. Works on tablets. Works on phones. ## Demo @@ -109,6 +109,47 @@ Instead of `v-model` you can use the `index` prop and `change` event: /> ``` +### Events + +| Event name | Payload | Description | +|---------------|------------------------------------------|--------------------------------------------------------------------------------------------| +| `change` | index of the image changed to | Is emitted on any image change (thumbnail navigation, prev/next, close) | +| `prev`/`next` | index of the image changed to | Is emitted specifically when the user clicks "Prev"/"Next" or presses Left/Right arrow key | +| `close` | index of the image Tinybox was closed at | Is emitted specifically when the user clicks "Close" or presses the Esc key | + +Events can come in handy for business logic cases: + +```html + +``` + +```js +export default { + // ... + methods: { + onChange(index) { + console.log("User navigated to the photo: ", index); + }, + onPrevious(index) { + console.log("User clicked 'previous' to switch to: ", index); + }, + onNext(index) { + console.log("User clicked 'previous' to switch to: ", index); + }, + onClose(index) { + console.log("User closed TinyBox on this photo: ", index); + } + }, +} +``` + ## Browser support | ![Chrome][chrome] | ![Firefox][firefox] | ![Safari][safari] | ![MS Edge][edge] | ![Internet Explorer][ie] | diff --git a/docs/index.html b/docs/index.html index e621ed0..17a4120 100644 --- a/docs/index.html +++ b/docs/index.html @@ -57,7 +57,7 @@

While being not as customizable as some other - lightboxes, Tinybox is very slick and lightweight (less than 3 KB minzipped). Tinybox is + lightboxes, Tinybox is very slick and lightweight (3 KB minzipped). Tinybox is great on mobile devices too: it supports swipe gestures and changes its size responsively.