161 lines
4.5 KiB
HTML
161 lines
4.5 KiB
HTML
|
<?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>
|