← Back to branch summary

~pablocapeluto/cds-php/devel-3.1

« back to all changes in this revision

Viewing changes to highslide/Docs/example-slideshow-controlbar.html

  • Committer: pcapeluto at gmail
  • Date: 2010-08-20 17:51:08 UTC
  • Revision ID: pcapeluto@gmail.com-20100820175108-jyi8dbyj15uy9p4i
Initial import

Show diffs side-by-side

added added

removed removed

Lines of Context:
highslide/Docs/example-slideshow-controlbar.html
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
 
2
<html>
 
3
<head>
 
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
5
 
 
6
<title>Highslide JS</title>
 
7
 
 
8
<!-- 
 
9
    1 ) Reference to the file containing the javascript. 
 
10
    This file must be located on your server. 
 
11
-->
 
12
 
 
13
<script type="text/javascript" src="highslide/highslide.js"></script>
 
14
 
 
15
 
 
16
<!-- 
 
17
    2) Optionally override the settings defined at the top
 
18
    of the highslide.js file. The parameter hs.graphicsDir is important!
 
19
-->
 
20
 
 
21
<script type="text/javascript">
 
22
 
 
23
        // remove the registerOverlay call to disable the controlbar
 
24
        hs.registerOverlay(
 
25
        {
 
26
                thumbnailId: null,
 
27
                overlayId: 'controlbar',
 
28
                position: 'top right',
 
29
                hideOnMouseOut: true
 
30
                }
 
31
        );
 
32
        
 
33
    hs.graphicsDir = 'highslide/graphics/';
 
34
    hs.outlineType = 'rounded-white';
 
35
    // Tell Highslide to use the thumbnail's title for captions
 
36
    hs.captionEval = 'this.thumb.title';
 
37
</script>
 
38
 
 
39
 
 
40
<!-- 
 
41
    3) These CSS-styles are necessary for the script to work. You may also put
 
42
    them in an external CSS-file. See the webpage for documentation.
 
43
-->
 
44
 
 
45
<style type="text/css">
 
46
* {
 
47
        font-family: Verdana, Helvetica;
 
48
        font-size: 10pt;
 
49
}
 
50
 
 
51
.highslide {
 
52
        cursor: url(highslide/graphics/zoomin.cur), pointer;
 
53
        outline: none;
 
54
}
 
55
 
 
56
.highslide-active-anchor img {
 
57
        visibility: hidden;
 
58
}
 
59
 
 
60
.highslide img {
 
61
        border: 2px solid gray;
 
62
}
 
63
 
 
64
.highslide:hover img {
 
65
        border: 2px solid white;
 
66
}
 
67
 
 
68
.highslide-wrapper {
 
69
        background: white;
 
70
}
 
71
 
 
72
.highslide-image {
 
73
        border: 2px solid white;
 
74
}
 
75
 
 
76
.highslide-image-blur {
 
77
        
 
78
}
 
79
 
 
80
.highslide-caption {
 
81
        display: none;
 
82
        border: 2px solid white;
 
83
        border-top: none;
 
84
        font-family: Verdana, Helvetica;
 
85
        font-size: 10pt;
 
86
        padding: 5px;
 
87
        background-color: white;
 
88
}
 
89
 
 
90
.highslide-loading {
 
91
        display: block;
 
92
        color: black;
 
93
        font-size: 8pt;
 
94
        font-family: sans-serif;
 
95
        font-weight: bold;
 
96
        text-decoration: none;
 
97
        padding: 2px;
 
98
        border: 1px solid black;
 
99
        background-color: white;
 
100
        padding-left: 22px;
 
101
        background-image: url(highslide/graphics/loader.white.gif);
 
102
        background-repeat: no-repeat;
 
103
        background-position: 3px 1px;
 
104
}
 
105
 
 
106
a.highslide-credits,a.highslide-credits i {
 
107
        padding: 2px;
 
108
        color: silver;
 
109
        text-decoration: none;
 
110
        font-size: 10px;
 
111
}
 
112
 
 
113
a.highslide-credits:hover,a.highslide-credits:hover i {
 
114
        color: white;
 
115
        background-color: gray;
 
116
}
 
117
 
 
118
.highslide-move {
 
119
        cursor: move;
 
120
}
 
121
 
 
122
.highslide-overlay {
 
123
        display: none;
 
124
}
 
125
 
 
126
a.highslide-full-expand {
 
127
        background: url(highslide/graphics/fullexpand.gif) no-repeat;
 
128
        display: block;
 
129
        margin: 0 10px 10px 0;
 
130
        width: 34px;
 
131
        height: 34px;
 
132
}
 
133
 
 
134
/* Controlbar example */
 
135
.controlbar {
 
136
        background: url(highslide/graphics/controlbar4.gif);
 
137
        width: 167px;
 
138
        height: 34px;
 
139
}
 
140
 
 
141
.controlbar a {
 
142
        display: block;
 
143
        float: left;
 
144
        /*margin: 0px 0 0 4px;*/
 
145
        height: 27px;
 
146
}
 
147
 
 
148
.controlbar a:hover {
 
149
        background-image: url(highslide/graphics/controlbar4-hover.gif);
 
150
}
 
151
 
 
152
.controlbar .previous {
 
153
        width: 50px;
 
154
}
 
155
 
 
156
.controlbar .next {
 
157
        width: 40px;
 
158
        background-position: -50px 0;
 
159
}
 
160
 
 
161
.controlbar .highslide-move {
 
162
        width: 40px;
 
163
        background-position: -90px 0;
 
164
}
 
165
 
 
166
.controlbar .close {
 
167
        width: 36px;
 
168
        background-position: -130px 0;
 
169
}
 
170
 
 
171
/* Necessary for functionality */
 
172
.highslide-display-block {
 
173
        display: block;
 
174
}
 
175
 
 
176
.highslide-display-none {
 
177
        display: none;
 
178
}
 
179
</style>
 
180
 
 
181
</head>
 
182
 
 
183
<body style="background-color: silver">
 
184
<div><!-- 
 
185
    4) This is how you mark up the thumbnail image with an anchor tag around it.
 
186
    The anchor's href attribute defines the URL of the full-size image.
 
187
--> <a id="thumb1" href="images/full6.jpg" class="highslide"
 
188
        onclick="return hs.expand(this)"> <img src="images/thumb6.jpg"
 
189
        alt="Highslide JS"
 
190
        title="Caption for the first image. This caption can be styled using CSS."
 
191
        height="80" width="120" /></a> <!-- Repetionion of the above --> <a
 
192
        id="thumb2" href="images/full6.jpg" class="highslide"
 
193
        onclick="return hs.expand(this)"> <img src="images/thumb6.jpg"
 
194
        alt="Highslide JS" title="Caption for the second image." height="80"
 
195
        width="120" /></a> <!-- 
 
196
        5 (optional). This is the markup for the controlbar. The conrolbar is tied to the expander
 
197
        in the script tag at the top of the file.
 
198
-->
 
199
<div id="controlbar" class="highslide-overlay controlbar"><a
 
200
        href="#" class="previous" onclick="return hs.previous(this)"
 
201
        title="Previous (left arrow key)"></a> <a href="#" class="next"
 
202
        onclick="return hs.next(this)" title="Next (right arrow key)"></a> <a
 
203
        href="#" class="highslide-move" onclick="return false"
 
204
        title="Click and drag to move"></a> <a href="#" class="close"
 
205
        onclick="return hs.close(this)" title="Close"></a></div>
 
206
</div>
 
207
</body>
 
208
</html>
 
 
b'\\ No newline at end of file'