← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.6rc2/tests/visual/magnifier.html

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery.ui-1.6rc2/tests/visual/magnifier.html
1
 
<?xml version="1.0" encoding="UTF-8"?>
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4
 
<head>
5
 
<meta http-equiv="Content-Language" content="en" />
6
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
 
<title>Magnifier Demo</title>
8
 
 
9
 
<style type="text/css">
10
 
 
11
 
body,html {
12
 
        margin: 0;
13
 
        padding: 0;
14
 
        font-family: Arial;
15
 
        font-size: 12px;
16
 
}
17
 
 
18
 
div.playground {
19
 
        height: 150px;
20
 
}
21
 
 
22
 
#example1 img,
23
 
#example2 img,
24
 
#example3 img,
25
 
#example4 img {
26
 
        float:left;
27
 
}
28
 
 
29
 
</style>
30
 
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
31
 
<script type="text/javascript" src="../../ui/ui.core.js"></script>
32
 
<script type="text/javascript" src="../../ui/ui.magnifier.js"></script>
33
 
 
34
 
 
35
 
</head>
36
 
<body>
37
 
 
38
 
<h2>1. Default, no options</h2>
39
 
<div class="playground">
40
 
        <div id='example1' class="ui-wrapper example" style="width: 580px; padding: 20px;">
41
 
                <img src="../images/clock.png" width="48" alt="" />
42
 
                <img src="../images/clock.png" width="48" alt="" />
43
 
                <img src="../images/clock.png" width="48" alt="" />
44
 
                <img src="../images/clock.png" width="48" alt="" />
45
 
                <img src="../images/clock.png" width="48" alt="" />
46
 
                <img src="../images/clock.png" width="48" alt="" />
47
 
        </div>
48
 
</div>
49
 
 
50
 
<h2>2. Magnification set to 1.5 (default: 2)</h2>
51
 
<div class="playground">
52
 
        <div id='example2' class="ui-wrapper example" style="width: 580px; padding: 20px;">
53
 
                <img src="../images/clock.png" width="48" alt="" />
54
 
                <img src="../images/clock.png" width="48" alt="" />
55
 
                <img src="../images/clock.png" width="48" alt="" />
56
 
                <img src="../images/clock.png" width="48" alt="" />
57
 
                <img src="../images/clock.png" width="48" alt="" />
58
 
                <img src="../images/clock.png" width="48" alt="" />
59
 
        </div>
60
 
</div>
61
 
 
62
 
<h2>3. Advanced example: overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, baseline: -1</h2>
63
 
<div class="playground">
64
 
        <div id='example3' class="ui-wrapper example" style="width: 580px; padding: 20px;">
65
 
                <img src="../images/clock.png" width="48" alt="" />
66
 
                <img src="../images/clock.png" width="48" alt="" />
67
 
                <img src="../images/clock.png" width="48" alt="" />
68
 
                <img src="../images/clock.png" width="48" alt="" />
69
 
                <img src="../images/clock.png" width="48" alt="" />
70
 
                <img src="../images/clock.png" width="48" alt="" />
71
 
        </div>
72
 
</div>
73
 
 
74
 
<h2>4. Advanced example: The direction doesn't have to be horizontal!</h2>
75
 
<div class="playground">
76
 
        <div id='example4' class="ui-wrapper example" style="width: 150px; padding: 20px; height: 150px;">
77
 
                <img src="../images/clock.png" width="48" alt="" />
78
 
                <img src="../images/clock.png" width="48" alt="" />
79
 
                <img src="../images/clock.png" width="48" alt="" />
80
 
                <img src="../images/clock.png" width="48" alt="" />
81
 
                <img src="../images/clock.png" width="48" alt="" />
82
 
                <img src="../images/clock.png" width="48" alt="" />
83
 
                <img src="../images/clock.png" width="48" alt="" />
84
 
                <img src="../images/clock.png" width="48" alt="" />
85
 
                <img src="../images/clock.png" width="48" alt="" />
86
 
        </div>
87
 
</div>
88
 
 
89
 
<script type="text/javascript">
90
 
if(!window.console) {
91
 
 window.console = {
92
 
        log: function() {
93
 
                alert(arguments[0]);    
94
 
        }       
95
 
 }      
96
 
}
97
 
 
98
 
$(window).bind("load",function(){
99
 
 
100
 
        $('#example1').magnifier();
101
 
        $('#example2').magnifier({ magnification: 1.5 });
102
 
        $('#example3').magnifier({ magnification: 1.5, overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, baseline: -1  });
103
 
        $('#example4').magnifier({ magnification: 1.5, overlap: true, zIndex: 10, opacity: { min: 0.6, max: 1 }, distance: 30  });
104
 
 
105
 
});
106
 
</script>
107
 
</body>
108
 
</html>