Awesome

React, Angular, Vue, and Typescript compatible image viewer

# Features

  • Lazy Loading
  • Zoomable
  • Custom Buttons
  • Description
  • Custom Select
  • Swipe On Touchscreen
  • Cover Size
  • Thumbnail Support
  • Navigation With Arrow Keys
  • Responsive Design
  • Dynamic HTML
  • Lightweight
  • Zero Dependency

# Installation

> step 1 : you can use either npm or yarn, or import the main file with the script tag.

# npm

# yarn

# html (download the imageViewer.js file from the src directory)

> step 2 : include the package in your code:

# npm and yarn

> step 3 : start showing your images!

# Images Format

The format of the images should be like this:

# The thumbnail and description are optional

# Current Selected

Instead of the first image, you can select whatever you want:

# Index starts from one

# Cover Size

If you set the stretchImages to true, it would stretch the small images to fill the page:

# default:

# stretch:

# Thumbnails

If you don't specify the thumbnail image, the main image will be used as the thumbnail. but if you don't want to show the thumbnails, you can set the showThumbnails to false:

# Zoom

Zooming is available with the zoom button or double tap, but you can disable it with isZoomable parameter:

# Custom Buttons

You can add some custom buttons:

# iconSize is optional (default value is '19px auto')

This component is NOT free!

Buy Awesome Image Viewer

For Just $1 !

One-time purchaseUse in unlimited projectsAccess to future updatesFork and customizationLifetime money back guarantee!Save at least 2 work days with just $1

If you are from countries that cannot pay online, you can use it for free.