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
87
88
89
90
91
92
93
94
95
96
97
98
|
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Testing image</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../../../dijit/themes/tundra/tundra.css";
/* needed for glass overlay: */
@import "../resources/Magnifier.css";
p { padding:20px; border:1px solid #ededed; }
#testImage { border:2px solid #000; }
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad:true"></script>
<!-- for debugging -->
<script type="text/javascript" src="../MagnifierLite.js"></script>
<script type="text/javascript" src="../Magnifier.js"></script>
<script type="text/javascript">
dojo.require("dojox.image.Magnifier");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.image.Magnifier test page</h1>
<p>They are just images. It's entirely unobtrusive to add magnification to an image, and style it accordingly.</p>
<p>This widget is based on <a href="test_MagnifierLite.html">dojox.image.MagnifierLite</a>, an image-only variant on this dojox.gfx
based Widget. The idea was/is to include addational surfaces in some kind of _Templated GFX widget, based on _Widget.</p>
<p>
Scale= 2.34, 5.67, and 8.90: <br>
<img id="testImage" dojoType="dojox.image.Magnifier" src="images/spanke.jpg"
style="width:200px; height:130px;" scale="2.34" />
<img id="testImage4" dojoType="dojox.image.Magnifier" src="images/spanke.jpg"
style="width:200px; height:130px;" scale="5.67" />
<img id="testImage5" dojoType="dojox.image.Magnifier" src="images/spanke.jpg"
style="width:200px; height:130px;" scale="8.90" />
</p>
<p>
<img id="testImage2" dojoType="dojox.image.Magnifier" src="images/spanke.jpg"
style="width:200px; height:130px; padding-right:20px; float:left" />
I Am Some inline text.<br>lorem ipsum.<br style="clear:both">
</p>
<p>A Transparent .png:<br>
<img style="width:400px; height:260px" id="test3"
dojoType="dojox.image.Magnifier" glassSize="215" scale="3"
src="../../../util/resources/logo/positive/dojo.logo.big.png" />
</p>
<p>Programatic:<br>
<button dojoType="dijit.form.Button" id="foob">
Make It
<script type="dojo/method" event="onClick">
this.setAttribute("disabled",true);
dijit.byId("foobd").setAttribute("disabled",false);
new dojox.image.Magnifier({ scale:4.2, glassSize:200 },"foobar");
</script>
</button>
<button dojoType="dijit.form.Button" id="foobd" disabled="disabled">
Destroy It
<script type="dojo/method" event="onClick">
this.setAttribute("disabled",true);
dijit.byId("foobar").destroy();
console.log('layout changed:');
dijit.byId("after1")._adjustScale();
dijit.byId("after2")._adjustScale();
</script>
</button>
<br /><!-- srcNodeRef : -->
<img id="foobar" style="width:300px; height:195px;" src="images/spanke.jpg" />
</p>
<p>Remote file (GTA:LCS/psp map):<br>
<img id='after1' style="width:167px; height:240px; border:4px solid #333;"
src="http://img.qj.net/uploads/articles_module/66700/stauntonhpackages_qjpreviewth.png"
scale="6" glassSize="150" dojoType="dojox.image.Magnifier"
/>
<br>Everybody loves Zelda, right?<br>
<img id='after2' style="width:585px; height:201px" scale="7" glassSize="185" dojoType="dojox.image.Magnifier" src="http://www.zelda-infinite.com/games/zelda1/overworld.png" />
</p>
<p id="programaticContainer">
<!-- not yet? -->
</p>
</body>
</html>
|
