ImageViewer

Full-screen image lightbox with previous and next arrows.

Import

Vue

import { UiImageViewer } from '@ziyarago/ui/vue'

Gallery

Vue

<UiImageViewer
  :images="['data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'800\'%20height=\'500\'%3E%3Crect%20width=\'800\'%20height=\'500\'%20fill=\'%230f766e\'/%3E%3Ctext%20x=\'400\'%20y=\'260\'%20font-size=\'48\'%20fill=\'white\'%20text-anchor=\'middle\'%20font-family=\'sans-serif\'%3EHaram%20view%3C/text%3E%3C/svg%3E', 'data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'800\'%20height=\'500\'%3E%3Crect%20width=\'800\'%20height=\'500\'%20fill=\'%239a3412\'/%3E%3Ctext%20x=\'400\'%20y=\'260\'%20font-size=\'48\'%20fill=\'white\'%20text-anchor=\'middle\'%20font-family=\'sans-serif\'%3EHotel%20lobby%3C/text%3E%3C/svg%3E', 'data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'800\'%20height=\'500\'%3E%3Crect%20width=\'800\'%20height=\'500\'%20fill=\'%231d4ed8\'/%3E%3Ctext%20x=\'400\'%20y=\'260\'%20font-size=\'48\'%20fill=\'white\'%20text-anchor=\'middle\'%20font-family=\'sans-serif\'%3EDeluxe%20room%3C/text%3E%3C/svg%3E']"
  :index="0"
  alt="Hotel photos"
  :open="open"
  @close="open = false"
 />

Single image

Vue

<UiImageViewer
  :images="['data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'800\'%20height=\'500\'%3E%3Crect%20width=\'800\'%20height=\'500\'%20fill=\'%230f766e\'/%3E%3Ctext%20x=\'400\'%20y=\'260\'%20font-size=\'48\'%20fill=\'white\'%20text-anchor=\'middle\'%20font-family=\'sans-serif\'%3EHaram%20view%3C/text%3E%3C/svg%3E']"
  alt="Haram view"
  :open="open"
  @close="open = false"
 />

API reference

Full-screen lightbox for one or several images with previous/next buttons and a counter.

Props

PropType and valuesDefaultDescription

openbooleanfalseShows the viewer when true; renders nothing when false.

imagesstring[]'[]'Image URLs.

indexnumber0Index of the image to start on.

altstring—Alt text of the image and aria-label of the dialog (default "Image viewer").

Events

Vue: @name. React: onName.

closeCalled on the close button or a click on the backdrop.

Notes

Navigation buttons appear only when there is more than one image.