LuloViewer

Customizable React based image viewer. View the DEMO here.

• Features
• Installation
• Options
• License

Features

Fully customizable React image viewer. It features image preloader, fullscreen mode, slide animations, zoom and pan and it has a slider that can be used optionally, and even separately.

Installation

From root dir of your project:

$ yarn add lulo-viewer

Usage

import LuloViewer from 'lulo-viewer'

...

const images = [
  'https://upload.wikimedia.org/wikipedia/commons/5/5d/Restless_flycatcher04.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/a/a2/SN1994D.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/b/b6/Felis_catus-cat_on_snow.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/c/ca/Larix_decidua_Aletschwald.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/7/7f/Waschbaer_auf_dem_Dach.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/f/f4/Leaf_1_web.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/0/03/Tavares.Forum.Romanum.redux.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/b/b3/Dolphind.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/c/c2/Martian-Sunset-O-de-Goursac-Curiosity-2013.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/8/8c/Great_Horned_Owl_in_a_Rain_Storm_in_the_Mojave.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/9/9f/Raccoon_climbing_in_tree_-_Cropped_and_color_corrected.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/9/95/Tracy_Caldwell_Dyson_in_Cupola_ISS.jpg',
  'https://upload.wikimedia.org/wikipedia/commons/c/cb/Hellyer_Gorge%2C_Tasmania.jpg',
]

...

<LuloViewer
  imageUrls={images}
  showViewer={true}
  showSlider={true}
  showArrows={true}
  showZoomController={true}
  allowMenu={true}
  allowCyclic={true}
  slideBgdColor="teal"
  randomSlideColors={true}
  slideTransitionDuration={0.3}
/>

Only imageUrls prop is required. LuloViewer will inherit dimensions from it's parent <div>.

Options

| Prop | Type | Description | | :---------------------- | :-----: | :----------------------------------------------------------------------------------------------------- | | imageUrls | array of strings | Array of image URLs. The only prop you MUST supply. Standard web formats accepted, including animated gif. | | showViewer | boolean | Show main image screen. | | showArrows | boolean | Show arrows on main image screen. | | showSlider | boolean | Show slider. | | showSliderArrows | boolean | Show slider arrows. | | showZoomController | boolean | Show zoom controller. | | allowMenu | boolean | Allow right-click menu. | | sliderPosition | string | Slider position. It can be 'bottom', 'top', 'left' or 'right'. | | arrowsSize | number | Size of main screen arrows. Should be between 0 and 1. Defaults to 0.05. | | arrowsPadding | number | Padding for main arrows in percent of picture div width. Defaults to 5. | | sliderSize | number | Slider size as fraction of div dimensions. Should be between 0 and 1. Defaults to 0.12 | | sliderArrowSize | number | Size of slider arrows as percent of slider size. Defaults to 3. | | zoomControllerSize | number | Zoom controller size as fraction of div dimensions. Should be between 0 and 1. Defaults to 0.18. | | zoomControllerPositionX | number | Zoom controller position as fraction of width. Should be between 0 and 1. Defaults to 0.8. | | zoomControllerPositionX | number | Zoom controller position as fraction of width. Should be between 0 and 1. Defaults to 0.025. | | menuSize | number | Menu size in viewer width percent. Defaults to 30. | | allowCyclic | bool | Allows jumping from last to first image and also from first to last. | | startingSlide | number | Defaults to 0. | | maxPreloadedImages | number | Maximum number of preloaded images. | | slideTransitionDuration | number | Duration of animations in s. Defaults to 0.3. | | randomSlideColors | boolean | Randomize slide background colors. | | backgroundColor | string | Background color. | | arrowDefaultColor | string | Arrows default color. | | arrowHighlightColor | string | Arrows highlight color. | | arrowDisabledColor | string | Arrows disabled color. | | slideBgdColor | string | Default color of unloaded slides. Should be used with randomSlideColors={false}. |

License

• MIT license