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
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Flipbook (draft)</title>
<style type="text/css">
body {
background-color: black;
color: white;
}
.ui-effects-transfer {
border: 2px dotted gray;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.event.special.gesture.js"></script>
<script type="text/javascript" src="jquery.gestureable.js"></script>
<script type="text/javascript">
/* Code to do some fancy book-like effects
*/
/* a closure-based class */
var ImageManager = function (images) {
var self = this;
var currentPage = 0;
self.getCurrentPages = function () {
return [images[currentPage],
images[currentPage+1]];
};
self.turnNext = function () {
currentPage += 2;
return self.getCurrentPages();
};
self.turnPrevious = function () {
currentPage -= 2;
return self.getCurrentPages();
};
};
function style_element(element) {
element.css('background-color', 'black');
element.css('width', '900px');
element.css('height', '650px');
element.css('border', '2px dashed white');
}
function small_gesture(event) {
/* called in mousedown of small images */
var container = $(event.target).closest('div');
var manager = container.data('manager');
var large = $(event.target).
attr('src').
replace(/small/, 'large');
switch (event.gesture) {
case 'U':
case 'D':
container.data('left').hide();
container.data('right').hide();
container.data('spacer').hide();
container.data('zoomed').attr('src', large).show('clip');
break;
case 'L':
var images = manager.turnPrevious();
container.data('left').attr('src', images[0] + '_small.jpg');
container.data('right').attr('src', images[1] + '_small.jpg');
break;
case 'R':
var images = manager.turnNext();
container.data('left').attr('src', images[0] + '_small.jpg');
container.data('right').attr('src', images[1] + '_small.jpg');
break;
}
}
function large_gesture(event) {
var container = $(event.target).closest('div');
switch (event.gesture) {
case 'U':
case 'D':
$(event.target).hide();
container.data('spacer').show();
container.data('left').show();
container.data('right').show();
}
}
function disable_scroll(event) {
/* Simply disables the dragging of elements */
return false;
}
function flipbook(element, images) {
var manager = new ImageManager(images);
element.data('manager', manager);
// apply the style
style_element(element);
// create a spacer div and attach it
var spacer = $('<div class="spacer"></div>');
spacer.css('height', '162px');
element.data('spacer', spacer);
element.append(spacer);
var zoomed = $('<img />');
zoomed.gestureable();
zoomed.mouseup(large_gesture).
mousedown(disable_scroll).
hide();
element.data('zoomed', zoomed);
element.append(zoomed);
// create the images
var currentImages = manager.getCurrentPages();
var left = $('<img src="' + currentImages[0] + '_small.jpg" />');
var right = $('<img src="' + currentImages[1] + '_small.jpg" />');
element.data('left', left);
element.data('right', right);
$([left, right]).each(function (key, value) {
// enable gestures
value.gestureable();
value.mouseup(small_gesture);
value.mousedown(disable_scroll);
// add to the display
element.append(value);
});
}
$(document).ready(function () {
flipbook($('#flipbook'),
['image_01', 'image_02', 'image_03', 'image_04',
'image_05', 'image_06', 'image_07', 'image_08',
'image_09', 'image_10', 'image_11', 'image_12',
'image_13', 'image_14', 'image_15']);
});
</script>
</head>
<body>
<div id="flipbook"></div>
<p>Usage: gesture left/right to change images, up/down to zoom in/out</p>
<p>The flipbook uses a number of libs:</p>
<p>
<ul>
<li>jQuery</li>
<li>jQuery UI</li>
<li>jQuery Special Event Gestures</li>
</ul>
</p>
</body>
</html>
|
