1 <?xml version="1.0" encoding="UTF-8"?>
3 "-//W3C//DTD XHTML 1.0 Strict//EN"
4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
7 <title>Flipbook (draft)</title>
8 <style type="text/css">
10 background-color: black;
14 .ui-effects-transfer {
15 border: 2px dotted gray;
18 <script type="text/javascript" src="jquery.js"></script>
19 <script type="text/javascript" src="jquery-ui.js"></script>
20 <script type="text/javascript" src="jquery.event.special.gesture.js"></script>
21 <script type="text/javascript" src="jquery.gestureable.js"></script>
22 <script type="text/javascript">
23 /* Code to do some fancy book-like effects
26 /* a closure-based class */
27 var ImageManager = function (images) {
31 self.getCurrentPages = function () {
32 return [images[currentPage],
33 images[currentPage+1]];
36 self.turnNext = function () {
38 return self.getCurrentPages();
41 self.turnPrevious = function () {
43 return self.getCurrentPages();
47 function style_element(element) {
48 element.css('background-color', 'black');
49 element.css('width', '900px');
50 element.css('height', '650px');
51 element.css('border', '2px dashed white');
54 function small_gesture(event) {
55 /* called in mousedown of small images */
56 var container = $(event.target).closest('div');
57 var manager = container.data('manager');
58 var large = $(event.target).
60 replace(/small/, 'large');
62 switch (event.gesture) {
65 container.data('left').hide();
66 container.data('right').hide();
67 container.data('spacer').hide();
68 container.data('zoomed').attr('src', large).show('clip');
71 var images = manager.turnPrevious();
72 container.data('left').attr('src', images[0] + '_small.jpg');
73 container.data('right').attr('src', images[1] + '_small.jpg');
76 var images = manager.turnNext();
77 container.data('left').attr('src', images[0] + '_small.jpg');
78 container.data('right').attr('src', images[1] + '_small.jpg');
83 function large_gesture(event) {
84 var container = $(event.target).closest('div');
85 switch (event.gesture) {
88 $(event.target).hide();
89 container.data('spacer').show();
90 container.data('left').show();
91 container.data('right').show();
95 function disable_scroll(event) {
96 /* Simply disables the dragging of elements */
100 function flipbook(element, images) {
101 var manager = new ImageManager(images);
102 element.data('manager', manager);
105 style_element(element);
107 // create a spacer div and attach it
108 var spacer = $('<div class="spacer"></div>');
109 spacer.css('height', '162px');
110 element.data('spacer', spacer);
111 element.append(spacer);
113 var zoomed = $('<img />');
114 zoomed.gestureable();
115 zoomed.mouseup(large_gesture).
116 mousedown(disable_scroll).
119 element.data('zoomed', zoomed);
120 element.append(zoomed);
123 var currentImages = manager.getCurrentPages();
124 var left = $('<img src="' + currentImages[0] + '_small.jpg" />');
125 var right = $('<img src="' + currentImages[1] + '_small.jpg" />');
126 element.data('left', left);
127 element.data('right', right);
129 $([left, right]).each(function (key, value) {
132 value.mouseup(small_gesture);
133 value.mousedown(disable_scroll);
134 // add to the display
135 element.append(value);
139 $(document).ready(function () {
140 flipbook($('#flipbook'),
141 ['image_01', 'image_02', 'image_03', 'image_04',
142 'image_05', 'image_06', 'image_07', 'image_08',
143 'image_09', 'image_10', 'image_11', 'image_12',
144 'image_13', 'image_14', 'image_15']);
149 <div id="flipbook"></div>
150 <p>Usage: gesture left/right to change images, up/down to zoom in/out</p>
151 <p>The flipbook uses a number of libs:</p>
156 <li>jQuery Special Event Gestures</li>