> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/containers/photoviewer.md).

# PhotoViewer

PhotoViewer provides a great way to show a gallery of photos. You can set a caption and description of each photo. User can zoom or drag the photo in viewer. 

{% hint style="info" %}
To control the visibility of the PhotoViewer you have to use conditional rendering. When PhotoViewer is exist on the page - it visible. You should provide closing logic in **`onClose`** callback.
{% endhint %}

```tsx
import { PhotoViewer, PhotoViewerImage } from 'altrone-ui';

const [visible, setVisible] = useState(false);

const gallery: PhotoViewerImage[] = [{
    src: '/path/to/image1.png',
    caption: 'Seaside',
}, {
    src: '/path/to/image2.png',
    caption: 'With family',
    description: 'With mom and dad'
}, {
    src: '/path/to/image3.png',
    caption: 'My dog!',
}];

return <div>
    <img src="/path/to/image1.png" onClick={() => setVisible(true)} />
    {visible && <PhotoViewer 
        images={gallery} 
        onClose={() => setVisible(false)}
    />}
</div>

```

## Images

PhotoViewer has a mandatory property images. It requires an array of PhotoViewerImages. You can set caption and description for each image to provide more information about image. This information will be placed in the bottom left corner of the screen.&#x20;

In cases when the image is not available altText will be visible instead of the image.&#x20;

### <mark style="color:blue;">PhotoViewerImage</mark>

```typescript
interface PhotoViewerImage {
  src: string; // source url for the image
  caption?: string; // caption of the image
  description?: string; // description text of the image
  altText?: string; // alternative text for accessibility
}
```

## Altrone Options

In **Altrone 2.2** PhotoViewer got a new configuration options ([read more](#altrone-options)). To achieve this, you can leverage `photoViewer.openDescriptionByDefault` to either show or hide description popup by default for all PhotoViewers.&#x20;

## Properties

| Property                                             | Type                                        | Description                                         |
| ---------------------------------------------------- | ------------------------------------------- | --------------------------------------------------- |
| **`images`**<mark style="color:red;">**`*`**</mark>  | [`PhotoViewerImage`](#photoviewerimage)`[]` | List of images                                      |
| **`onClose`**<mark style="color:red;">**`*`**</mark> | `() => void`                                | Callbacks fires when user wants to close the viewer |
| **`startsFrom`**                                     | `number`                                    | Index of the first image                            |
| **`min`**                                            | number                                      | Minimum scale value. Default value is `1`           |
| **`max`**                                            | number                                      | Maximum scale value. Default value is `3`           |
| **`className`**                                      | `string`                                    | Custom CSS class                                    |

## History

* **`Altrone 2.2`**:
  * added `openDescriptionByDefault` config option
* **`Altrone 2.1`**:
  * added `min` prop
  * added `max` prop
* **`Altrone 2.0`:** initial relese