Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sethsandaru/js-image-splitter-view

JS Library to create an Image Splitter UI View
https://github.com/sethsandaru/js-image-splitter-view

image image-compare image-splitter-view js library ui-component ui-design view web-ui

Last synced: 3 months ago
JSON representation

JS Library to create an Image Splitter UI View

Host: GitHub
URL: https://github.com/sethsandaru/js-image-splitter-view
Owner: sethsandaru
License: mit
Created: 2019-08-13T05:03:31.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-05-13T07:13:29.000Z (8 months ago)
Last Synced: 2024-05-13T08:30:04.804Z (8 months ago)
Topics: image, image-compare, image-splitter-view, js, library, ui-component, ui-design, view, web-ui
Language: JavaScript
Homepage: https://sethphat.com/js-image-splitter-view/demo/
Size: 5.18 MB
Stars: 6
Watchers: 3
Forks: 0
Open Issues: 5
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# js-image-splitter-view
Simple JS/JQuery Library to create an Image Splitter View. Best use-case is for Compare Products/Images/... Website :D

Demo (demo file is in the demo folder of this repository):
![Hehe](https://i.imgur.com/6pF4gzp.gif)

Online Demo: [https://sethphat.com/js-image-splitter-view/demo/](https://sethphat.com/js-image-splitter-view/demo/)

Version: **1.0.0**

## Dependencies
- JQuery
- JQuery UI

Note: you must include both JQuery and JQuery UI in order to use this library.

## Usage
Include those files in `dist` to your project, then:
```html

```

### Preparation
You need prepare this HTML structure before initialize the UI View:
```html

```

### Initialize
```javascript

$(document).ready(function() {
$("#splitterContainer").imageSplitter();
});

```

Result:
![Result Default](https://i.imgur.com/h866olV.png)

### Available Colors for Splitter Control
- .is-primary
- .is-success
- .is-info
- .is-warning
- .is-danger

You need to add it like this:
```html

```

Result:
![Splitter Control Image](https://i.imgur.com/J2TMZWx.png)

## Important Note
- You have to make sure both of your images is full-width and have a same width & height. Otherwise it will break.

## Copyright & Supporting the project
If you really like this project & want to contribute a little for the development. You can buy me a coffee. Thank you very much for your supporting ♥.