Skip to content

Commit

Permalink
Start migration of the EZPlus demo. No angular directives yet used.
Browse files Browse the repository at this point in the history
  • Loading branch information
Igor Lino committed Jun 24, 2015
1 parent 9f6e4e1 commit fc04fdf
Show file tree
Hide file tree
Showing 18 changed files with 2,322 additions and 118 deletions.
233 changes: 233 additions & 0 deletions demo/api.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
<div id="col_wrap">
<div id="col_left" class="zoom-wrapper">

<!-- OPTIONS-->
<h1>Configuration Options</h1>

<p>These are the available options for the zoom</p>

<p>See some examples of usage on our <a href="examples.htm">examples page</a>
</p>

<div class="transparent_top p1"></div>
<div class="table transparent p1">
<table width="100%" class="options" cellpadding="0" cellspacing="0">
<thead>


<tr>
<th width="131">Option</th>
<th width="180">Default Value</th>
<th>Desciption</th>
</tr>
</thead>
<tbody>
<tr>
<td>responsive</td>
<td>false</td>
<td>Set to true to activate responsivenes. If you have a theme which changes size, or tablets which
change orientation this is needed to be on. Possible Values: <code>"True"</code>,
<code>"False"</code></td>
</tr>
<tr>
<td>scrollZoom</td>
<td>false</td>
<td>Set to true to activate zoom on mouse scroll. Possible Values: <code>"True"</code>, <code>"False"</code>
</td>
</tr>
<tr>
<td>imageCrossfade</td>
<td>false</td>
<td>Set to true to activate simultaneous crossfade of images on gallery change. Possible Values:
<code>"True"</code>, <code>"False"</code></td>
</tr>
<tr>
<td>loadingIcon</td>
<td>false</td>
<td>Set to the url of the spinner icon to activate, e.g, http://www.example.com/spinner.gif.
Possible Values: <code>"True"</code>, <code>"False"</code></td>
</tr>
<tr>
<td>easing</td>
<td>false</td>
<td>Set to true to activate easing. Possible Values: <code>"True"</code>, <code>"False"</code></td>
</tr>
<tr>
<td>easingType</td>
<td>zoomdefault</td>
<td><p>default easing type is easeOutExpo, (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b<br>
Extend jquery with other easing types before initiating the plugin and pass the easing type as a
string value.
</p></td>
</tr>
<tr>
<td>easingDuration</td>
<td>2000</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>lensSize</td>
<td>200</td>
<td>used when zoomType set to lens, when zoom type is set to window, then the lens size is auto
calculated
</td>
</tr>
<tr>
<td>zoomWindowWidth</td>
<td>400</td>
<td>Width of the zoomWindow (Note: zoomType must be &quot;window&quot;)</td>
</tr>
<tr>
<td>zoomWindowHeight</td>
<td>400</td>
<td>Height of the zoomWindow (Note: zoomType must be &quot;window&quot;)</td>
</tr>
<tr>
<td>zoomWindowOffetx</td>
<td>0</td>
<td>x-axis offset of the zoom window</td>
</tr>
<tr>
<td>zoomWindowOffety</td>
<td>0</td>
<td>y-axis offset of the zoom window</td>
</tr>
<tr>
<td>zoomWindowPosition</td>
<td>1</td>
<td>Once positioned, use <code>zoomWindowOffsetx</code> and <code>zoomWindowOffsety</code> to adjust<br/>
Possible values: 1-16
</td>
</tr>
<tr>
<td>lensFadeIn</td>
<td>false</td>
<td>Set as a number e.g 200 for speed of Lens fadeIn</td>
</tr>
<tr>
<td>lensFadeOut</td>
<td>false</td>
<td>Set as a number e.g 200 for speed of Lens fadeOut</td>
</tr>
<tr>
<td>zoomWindowFadeIn</td>
<td>false</td>
<td>Set as a number e.g 200 for speed of Window fadeIn</td>
</tr>
<tr>
<td>zoomWindowFadeOut</td>
<td>false</td>
<td>Set as a number e.g 200 for speed of Window fadeOut</td>
</tr>
<tr>
<td>zoomTintFadeIn</td>
<td>false</td>
<td>Set as a number e.g 200 for speed of Tint fadeIn</td>
</tr>
<tr>
<td>zoomTintFadeOut</td>
<td>false</td>
<td>Set as a number e.g 200 for speed of Tint fadeOut</td>
</tr>
<tr>
<td>borderSize</td>
<td>4</td>
<td>Border Size of the ZoomBox - Must be set here as border taken into account for plugin
calculations
</td>
</tr>
<tr>
<td>zoomLens</td>
<td>true</td>
<td>set to false to hide the Lens</td>
</tr>
<tr>
<td>borderColour</td>
<td>#888</td>
<td>Border Colour</td>
</tr>
<tr>
<td>lensBorder</td>
<td>1</td>
<td>Width in pixels of the lens border</td>
</tr>
<tr>
<td>lensShape</td>
<td>square</td>
<td>can also be round (note that only modern browsers support round, will default to square in older
browsers)
</td>
</tr>
<tr>
<td>zoomType</td>
<td>window</td>
<td>Possible Values: Lens, Window, Inner</td>
</tr>
<tr>
<td>containLensZoom</td>
<td>false</td>
<td>for use with the Lens Zoom Type. This makes sure the lens does not fall outside the outside of
the image
</td>
</tr>
<tr>
<td>lensColour</td>
<td>white</td>
<td>colour of the lens background</td>
</tr>
<tr>
<td>lensOpacity</td>
<td><p>0.4</p></td>
<td>used in combination with lensColour to make the lens see through. When using tint, this is
overrided to 0
</td>
</tr>
<tr>
<td>lenszoom</td>
<td>false</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>tint</td>
<td>false</td>
<td>enable a tint overlay, other options: true</td>
</tr>
<tr>
<td>tintColour</td>
<td>#333</td>
<td>colour of the tint, can be #hex, word (red, blue), or rgb(x, x, x)</td>
</tr>
<tr>
<td>tintOpacity</td>
<td>0.4</td>
<td>opacity of the tint</td>
</tr>
<tr>
<td>gallery</td>
<td>null</td>
<td>This assigns a set of gallery links to the zoom image</td>
</tr>
<tr>
<td>cursor</td>
<td>default</td>
<td>The default cursor is usually the arrow, if using a lightbox, then set the cursor to pointer so
it looks clickable - Options are default, cursor, crosshair
</td>
</tr>
</tbody>
</table>

</div>
<div class="transparent_bottom"></div>
<p>&nbsp;</p>

<!-- END OPTIONS-->

<div class="clear"></div>
</div>

</div>
<script type="text/javascript">
// Rerun Prism syntax highlighting on the current page
Prism && Prism.highlightAll();
</script>
4 changes: 0 additions & 4 deletions demo/app.js

This file was deleted.

Loading

0 comments on commit fc04fdf

Please sign in to comment.