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):
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:
<link rel="stylesheet" href="css/image.splitter.view.css" />
<script src="js/jquery.image.splitter.view.js"></script>
Preparation
You need prepare this HTML structure before initialize the UI View:
<div class="splitter-container" id="splitterContainer">
<div>
<img class="img-responsive" src="img1.png">
</div>
<div>
<img class="img-responsive" src="img2.png">
</div>
</div>
Initialize
<script>
$(document).ready(function() {
$("#splitterContainer").imageSplitter();
});
</script>
Result:
Available Colors for Splitter Control
- .is-primary
- .is-success
- .is-info
- .is-warning
- .is-danger
You need to add it like this:
<div class="splitter-container is-primary" id="splitterContainer">
Result:
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 ♥.
Copyright © 2018 by Seth Phat aka Phat Tran Minh!