<!DOCTYPE html>
<html lang="en">
<head>
<title>Master Slider :: Transition Gallery</title>
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<header>
<div class="header-bar">
<h1 class="title">Master Slider Transition Gallery</h1>
<ul class="nav">
<li>
<a href="http://support.averta.net/envato/faq/master-slider/" class="faq">FAQ</a>
</li>
<li>
<a href="http://support.averta.net/envato/support/master-slider/" class="forum">Support Forum</a>
</li>
<li>
<a href="http://www.masterslider.com/doc/" class="doc">Documentation</a>
</li>
<li>
<a href="http://www.masterslider.com/" class="home">Home</a>
</li>
</ul>
</div>
</header>
<div class="main-cont">
<div class="sidebar">
<div class="logo-cont">
<img src="images/logo.gif" alt="Master Slider" />
</div>
<div class="options">
<div class="opttions-title first">Show Transition</div>
<div class="options-cont">
<label>Delay</label><input type="text" value="0" id="showdelay" /><label>ms</label>
<div style="clear:both"> </div>
<label>Duration</label><input type="text" value="1800" id="showduration" /><label>ms</label>
<div style="clear:both"> </div>
<label>Ease</label>
<select id="showease">
<option value="linear" selected="selected">linear</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInCirc">easeInCirc</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInOutCirc">easeInOutCirc</option>
<option value="easeInExpo">easeInExpo</option>
<option value="easeOutExpo">easeOutExpo</option>
<option value="easeInOutExpo">easeInOutExpo</option>
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
<option value="easeInSine">easeInSine</option>
<option value="easeOutSine">easeOutSine</option>
<option value="easeInOutSine">easeInOutSine</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBack">easeOutBack</option>
</select>
</div>
<div class="opttions-title">Hide Transition</div>
<div class="options-cont">
<label>Start</label><input type="text" value="" id="hidetime" /><label>ms</label>
<div style="clear:both"> </div>
<label>Duration</label><input type="text" value="" id="hideduration" /><label>ms</label>
<div style="clear:both"> </div>
<label>Ease</label>
<select id="hideease">
<option value="null" selected="selected">--select--</option>
<option value="linear" >linear</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInCirc">easeInCirc</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInOutCirc">easeInOutCirc</option>
<option value="easeInExpo">easeInExpo</option>
<option value="easeOutExpo">easeOutExpo</option>
<option value="easeInOutExpo">easeInOutExpo</option>
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
<option value="easeInSine">easeInSine</option>
<option value="easeOutSine">easeOutSine</option>
<option value="easeInOutSine">easeInOutSine</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBack">easeOutBack</option>
</select>
</div>
</div>
<div class="cpyr">Designed by <a href="http://www.averta.net/" title="Averta" style="text-decoration: none; color:rgb(94, 115, 148)" target="_blank">Averta</a>. </div>
</div>
<div class="content">
<div class="preview-cont">
<div id="scene" class="scene">
<div class="sence-control">
<label>W: </label><input type="text" value="500" id="sw"> <label>H: </label><input value="350" type="text" id="sh">
</div>
<div class="box" id="box"> </div>
</div>
</div>
<div class="output-cont">
<div class="output-title">Output</div>
<pre id="output"> </pre>
</div>
<div id="list-cont" class="list-cont"> </div>
</div>
</div>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/transition-dic.js"></script>
<script src="js/main.js"></script>
<script>
var _3dt = new TransitionGallery(document.getElementById('list-cont') , transitions).create();
</script>
</body>
</html>