lulo-viewer

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