VIEWOVER

Create a light & featured modal to display photos and videos gallery overlay on the page
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. Getting Started
2. Usage
3. Roadmap
4. Contributing
5. License
6. Contact

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

(back to top)

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.

(back to top)

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>

⚠️ Note: This version does not fully support iframe elements except YouTube

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
});

(back to top)

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).

(back to top)

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Yedidya Aberjel - yedidya.dev@gmail.com

Project Link: https://github.com/viewoverjs/viewover

(back to top)