forked from UIZE/UIZE-JavaScript-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-zoom-examples.html
88 lines (73 loc) · 4.48 KB
/
javascript-zoom-examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Zoom Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="UIZE JavaScript Framework"/>
<meta name="description" content="The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 7 JavaScript zoom examples."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="css/page.css"/>
<link rel="stylesheet" href="css/page.simpledoc.css"/>
<link rel="stylesheet" href="css/page.index.css"/>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="index.html" title="UIZE JavaScript Framework home"></a>
JavaScript Zoom Examples
</h1>
<div class="main">
<div class="preamble">
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 7 JavaScript zoom examples.
<div class="tourPromo">
<div class="tourPromoHeading">TAKE A STEP-BY-STEP TOUR...</div>
<div class="tourPromoText">
You can take a step-by-step tour through the examples listed on this page. When you get into the tour, you can use the gigantic arrows that will appear on either side of the example pages to navigate from one page to the next (or back). You can also use the "thermometer" bar, that will appear right underneath the title bar of the example pages, to navigate to other pages in the tour. The highlighted segment of the thermometer shows you where you are in the tour.
</div>
<div>
<a href="javascript-feature-tours.html?tour=zoom" class="buttonLink">START THE TOUR<span class="arrow"> </span></a>
<br style="line-height:6px;"/>
<br style="clear:right;"/>
</div>
</div>
</div>
<ul id="page-index">
<li>
<div class="itemTitle"><a href="examples/collection-item-coupled-zooming.html">Coupled Zooming Collection Items</a><span class="arrow"> </span></div>
<div class="itemBody">See how two instances of the zooming collection item widget can be coupled together to give you a side-by-side zoomed in comparison of two images.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/mag-view.html">Mag View</a><span class="arrow"> </span></div>
<div class="itemBody">Experience the image magnifier widget that lets you see a zoomed in version of a highlighted area of an image, with support for multiple zoom levels.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/marquee-and-image-port.html">Marquee and Image Port</a><span class="arrow"> </span></div>
<div class="itemBody">See this demo for a drag-and-drop image crop interface, with an enlarged display of the cropped region. Drag to move it, or drag its edges to resize.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/thumbzoom.html">Uize.Widget.ThumbZoom</a><span class="arrow"> </span></div>
<div class="itemBody">Astonish users with a slick animated image preview feature where a larger preview zooms out from a grid of thumbnail images. This demo shows you how.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-port-zoom-and-pan.html">Zoom and Pan</a><span class="arrow"> </span></div>
<div class="itemBody">See how a draggable image port lets you control zoom for an image in a view port by ctrl-clicking and dragging, or pan by just clicking and dragging.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-item-zooming-with-image-switching.html">Zooming Collection Item with Image Switching</a><span class="arrow"> </span></div>
<div class="itemBody">See how the zooming collection item widget is used in combination with an image selector strip to provide an interface for previewing multiple images.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-item-zooming.html">Zooming Collection Items</a><span class="arrow"> </span></div>
<div class="itemBody">Experience the zooming collection item widget. It gives you a lightweight and intuitive preview behavior, with a JavaScript animation zoom-in effect.</div>
</li>
</ul>
</div>
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Doc.library',
'UizeDotCom.Page.Index'
],
builder:function () {(window.page = new UizeDotCom.Page.Index).wireUi ()}
});
</script>
</body></html>