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

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!

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

License

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

Contact

Yedidya Aberjel - [email protected]

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