-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex6.html
168 lines (160 loc) · 6.86 KB
/
index6.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<title>Awkward Showcase - Demo #6</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-index6.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.aw-showcase.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_height: 470,
fit_to_parent: true,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'hslide', /* hslide/vslide/fade */
transition_speed: 500,
transition_delay: 300,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: true /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. It's OK with only the width. */
});
});
</script>
</head>
<body>
<div class="menu"><a href="index.html">Demo #1</a> (Normal) | <a href="index2.html">Demo #2</a> (Vertical thumnbails) | <a href="index3.html">Demo #3</a> (Horizontal thumbnails) | <a href="index4.html">Demo #4</a> (Dynamic height) | <a href="index5.html">Demo #5</a> (Hundred percent) | <a href="index6.html" class="active">Demo #6</a> (Viewline)</div>
<!-- This is the button used to switch between One Page and Slideshow. -->
<p style="text-align: center;"><a id="awOnePageButton" href="#"><span class="view-page">View As One Page</span><span class="view-slide">View As Slideshow</span></a></p>
<div id="showcase" class="showcase" style="width: 1200px;">
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
<!-- If the slide contains multiple elements you should wrap them in a div with the class .showcase-content-wrapper. -->
<div class="showcase-content-wrapper">
<!-- As for dynamic height you need to set the width and height of images in the source for viewline to work. -->
<img src="images/01.jpg" alt="01" width="700px" height="470px" />
<p class="static-caption">This is a static caption for this image. Everything is possible.</p>
</div>
</div>
<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
<div class="showcase-thumbnail">
<img src="images/01.jpg" alt="01" width="140px" />
<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<img src="images/02.jpg" alt="02" width="700px" height="470px" />
<p class="static-caption">This is also a static caption for this image.</p>
</div>
</div>
<div class="showcase-thumbnail">
<img src="images/02.jpg" alt="01" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
<!-- Put the tooltips in a div with the class .showcase-tooltips. -->
<div class="showcase-tooltips">
<!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. -->
<a href="http://www.awkward.se" coords="634,130">
<!-- The content of the anchor-tag is displayed in the tooltip. -->
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="200,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="600,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="356, 172">
<!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
<img src="images/glasses.png" />
<span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
White Glasses: 500$
</span>
</a>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<img src="images/03.jpg" alt="03" width="700px" height="470px" />
<p class="static-caption">Yep, this is also a static caption for this image.</p>
</div>
</div>
<div class="showcase-thumbnail">
<img src="images/03.jpg" alt="01" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<img src="images/04.jpg" alt="04" width="579px" />
</div>
</div>
<div class="showcase-thumbnail">
<img src="images/04.jpg" alt="04" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<img src="images/07.jpg" alt="07" width="700px" height="470px" />
</div>
</div>
<div class="showcase-thumbnail">
<img src="images/07.jpg" alt="07" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<img src="images/05.jpg" alt="05" width="700px" />
</div>
</div>
<div class="showcase-thumbnail">
<img src="images/05.jpg" alt="05" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 50px;">
<a href="http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin">
Click here to download and learn more about this jQuery plugin.
</a>
</div>
</body>
</html>