Macylion / TwoInOne---Image-Splitter

TwoInOne - Image Splitter

TwoInOne - Image Splitter

How to install?

---

Install jquery

Local

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-ui.min.js"></script>

Hosted

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Install TwoInOne

Local

<link rel="stylesheet" href="twoInOne.min.css">
<script src="twoInOne.min.js"></script>

Hosted

<link rel="stylesheet" href="https://cdn.rawgit.com/Macylion/TwoInOne---Image-Splitter/4e231387/TwoInOne/twoInOne.min.css">
<script src="https://cdn.rawgit.com/Macylion/TwoInOne---Image-Splitter/4e231387/TwoInOne/twoInOne.min.js"></script>

Example

Example at codepen.io

How to use?

---

Adding a Image Splitter

App.add('#container', 'img1.png', 'img2.png');

Changing default spacer position

App.add('#container', 'img1.png', 'img2.png', 'center');

Adding a spacer icon

App.add('#container', 'img1.png', 'img2.png', 'center', 'spacer.png');

Stylizing a spacer

.tio-stick{
  background-color: white;
  border: 2px dotted red;
}

Mini-Documentation

---

App.add(containerDiv, firstImage, secondImage, spacerPosition, spacerIcon)

• containerDiv
  • String
  • Example '#cont'
• firstImage
  • String
  • Example 'img.png'
• secondImage
  • String
  • Example 'img2.png'
• spacerPosition (optional)
  • String
  • Example 'left' 'center' 'right'
• spacerIcon (optional)
  • String
  • Example 'spacer-icon.png'

Simple and Easy