Viewover NPM | npm.io

Features

Embraces native HTML coding conventions
Small size and no dependencies
Supports all modern browsers
Adopt modern ES6 JS syntax
Support IMG, VIDEO, YOUTUBE IFRAME elements
Support keyboard navigation
Support touch navigation
Thumbnail slider
Auto width and height
Slide or fade transition by CSS
Supports breakpoints
Accepts CSS relative units
Autoplay with progress bar and a play-pause toggle button
Supports RTL and vertical direction
Mouse drag and touch swipe
Free drag mode
Mouse wheel navigation
Lazy loading
Accessibility friendly
Live Region -->

Getting Started

Installation

To get started, you can either install the package via NPM or use the CDN url.

NPM

Run this command to install the NPM package:

npm install viewover

CDN

Or, use the jsDelivr CDN url

<script type="module">
  import Viewover from 'https://cdn.jsdelivr.net/npm/viewover@latest/dist/viewover-bundle.min.js'
  const viewover = new Viewover();
</script>

It is necessary to add the type='module' attribute to the script tag in order to use the ES6 module syntax.

Usage

For implementation, you need to add the data-viewover-list attribute to the media elements wrapper to display them in viewover.

<!-- index.html -->

<div data-viewover-list>
  <img src="image1.jpg" alt="image 1">
  <img src="image2.jpg" alt="image 2">
  <video src="video1.mp4" alt="video 1"></video>
  <iframe src="https://www.youtube.com/embed/1" alt="video 2"></iframe>
</div>

Then, import the viewover module from cdn or node modules and call for the new instance. The default options will be used. For more information about the options, see the Options section.

// index.js

// cdn
import Viewover from 'https://cdn.jsdelivr.net/npm/viewover@latest/dist/viewover-bundle.min.js';

// npm
import Viewover from '../node_modules/viewover/dist/viewover-bundle.min.js';

const viewover = new Viewover();

To customize the viewover, you can pass an object with the desired options to the viewover constructor.

// index.js

const viewover = new Viewover({
  // options
});

Options

Options can be passed to the viewover constructor as an object. The following options are available:

Option	Type	Default	Description	Comment
`fullscreen`	boolean	`true`	Enable or disable fullscreen mode
`zoom`	boolean	`true`	Enable or disable zoom mode	In any case, the zoom mode will be disabled if the image size is smaller than the width or height of the main container
`thumbnails`	boolean	`false`	Enable or disable thumbnails mode

For now, viewover options are limited to the above. More options will be added in the future.

Example:

// index.js

const viewover = new Viewover({
  fullscreen: true,
  zoom: true,
  thumbnails: true
});

Roadmap

Feature: Social network sharing buttons
Feature: Download button
Feature: Add more content types
Feature: More Customizable UI
- RTL support
- Icons variations
- Customizable colors
- More zoom options
- Animation support

And more...

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!