JSON Control for Omnis Studio 8.1 and above.
Omnis-2020 is a JSON defined component built around Zurb's Before-After-Script available from https://github.com/zurb/twentytwenty.
Omnis Studio 8.1
This repository includes the following:
dist/2020: A folder containing the JSON definition file control.json as generated by the JSON Control Editor available from the Omnis Studio Add-Ons menu together with two example images used by the Omnis Studio component store and design environment.
dist/css: File to be copied in the Omnis Studio \html\css folder
dist/scripts: Files to be copied in the Omnist Studio \html\scripts folder
lib/8.1 JS2020.lbs: Omnis Studio Demo library file
src/8.1: JSON Export of the Omnis Studio Demo Library
- Ensure Omnis Studio is closed.
- Place the folder 2020 into the \html\controls (not \htmlcontrols) of your Omnis Studio tree, first creating the folder if it does not already exist.
- Copy ctl_2020.js, jquery.twentytwenty.js and jquery.event.move.js into \html\scripts of your Omnis Studio tree.
- Copy 2020.min.css into \html\css of your Omnis Studio tree.
- Add the following lines to your \html\jsctempl.htm file under the Omnis Studio JavaScript client:
<link type="text/css" rel="stylesheet" href="css/2020.min.css" media="screen" /> <script type="text/javascript" src="scripts/jquery.event.move.js"></script>
<script type="text/javascript" src="scripts/jquery.twentytwenty.js"></script>
<script type="text/javascript" src="scripts/ctl_2020.js"></script>- Start Omnis Studio.
- With the libraries node selected in the Studio Browser, press the New Lib from JSON hyperlink, set the JSON Tree Path to the OMNIS-2020 folder (containing demo library exported as JSON) and select a location for your new library.
- Press Import and the demo library should be ready to use.