Omnis-2020

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.

Requirements

Omnis Studio 8.1

Contents

This repository includes the following:

dist

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

lib/8.1 JS2020.lbs: Omnis Studio Demo library file

src

src/8.1: JSON Export of the Omnis Studio Demo Library

Installation

1. Ensure Omnis Studio is closed.
2. 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.
3. Copy ctl_2020.js, jquery.twentytwenty.js and jquery.event.move.js into \html\scripts of your Omnis Studio tree.
4. Copy 2020.min.css into \html\css of your Omnis Studio tree.
5. 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>

5. Start Omnis Studio.
6. 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.
7. Press Import and the demo library should be ready to use.