```
Initialize the script:
```js
const prvs = new Parvus()
```
### Captions
To show a caption under the image, add a `data-caption` attribute:
```html
```
Alternatively, set the option `captionsSelector` to select captions from an element's innerHTML:
```html
I'm a caption
//...
```
Alternatively, set the option `gallerySelector` to group all images with a specific class within a selector:
```html
// ...
```
### Localization
Import the language module and set it as an option for localization:
```js
import de from 'parvus/src/l10n/de'
const prvs = new Parvus({
l10n: de
})
```
## Options
Customize Parvus by passing an options object when initializing:
```js
const prvs = new Parvus({
// Clicking outside does not close Parvus
docClose: false
})
```
Available options include:
```js
{
// Selector for elements that trigger Parvus
selector: '.lightbox',
// Selector for a group of elements combined as a gallery, overrides the `data-group` attribute.
gallerySelector: null,
// Display zoom indicator
zoomIndicator: true,
// Display captions if available
captions: true,
// Selector for the element where the caption is displayed; use "self" for the `a` tag itself.
captionsSelector: 'self',
// Attribute to get the caption from
captionsAttribute: 'data-caption',
// Clicking outside closes Parvus
docClose: true,
// Close Parvus by swiping up/down
swipeClose: true,
// Accept mouse events like touch events (click and drag to change slides)
simulateTouch: true,
// Touch dragging threshold in pixels
threshold: 100,
// Hide browser scrollbar
hideScrollbar: true,
// Icons
lightboxIndicatorIcon: '',
previousButtonIcon: '',
nextButtonIcon: '',
closeButtonIcon: '',
// Localization of strings
l10n: en
}
```
## API
Parvus provides the following API functions:
| Function | Description |
| --- | --- |
| `open(element)` | Open the specified `element` (DOM element) |
| `close()` | Close Parvus |
| `previous()` | Show the previous image |
| `next()` | Show the next image |
| `select(index)` | Select a slide with the specified `index` (integer) |
| `add(element)` | Add the specified `element` (DOM element) |
| `remove(element)` | Remove the specified `element` (DOM element) |
| `destroy()` | Destroy Parvus |
| `isOpen()` | Check if Parvus is currently open |
| `currentIndex()` | Get the index of the currently displayed slide |
## Events
Bind and unbind events using the `.on()` and `.off()` methods:
```js
const prvs = new Parvus()
const listener = () => {
console.log('eventName happened')
}
// Bind event listener
prvs.on(eventName, listener)
// Unbind event listener
prvs.off(eventName, listener)
```
Available events:
| eventName | Description |
| --- | --- |
| `open` | Triggered after Parvus has opened |
| `select` | Triggered when a slide is selected |
| `close` | Triggered after Parvus has closed |
| `destroy` | Triggered after Parvus has destroyed |
## Browser Support
Parvus is supported on the latest versions of the following browsers:
- Chrome
- Edge
- Firefox
- Safari