2012-08-05 22:53:38 +04:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" href="gallery.css">
|
|
|
|
|
<link rel="stylesheet" href="single-image-mode.css">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="markers.css">
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.viewer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="jquery.js"></script>
|
|
|
|
|
<script src="jquery-ui-1.8.22.custom.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="jquery.touchSwipe.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- XXX STUB -->
|
|
|
|
|
<script src="images.js"></script>
|
|
|
|
|
<script src="gallery-prototype.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="ui.js"></script>
|
|
|
|
|
<script src="markers.js"></script>
|
|
|
|
|
|
|
|
|
|
<!--script src="gallery.js"></script-->
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function setup(){
|
|
|
|
|
// XXX load state...
|
|
|
|
|
// initial state (default)...
|
|
|
|
|
setDefaultInitialState()
|
|
|
|
|
|
|
|
|
|
// XXX
|
|
|
|
|
setBackgroundMode('dark')
|
|
|
|
|
|
|
|
|
|
// setup event handlers...
|
2012-08-06 16:24:20 +04:00
|
|
|
setupEvents()
|
2012-08-05 22:53:38 +04:00
|
|
|
setupControlElements()
|
|
|
|
|
|
|
|
|
|
// XXX
|
|
|
|
|
//fieldSize(800, 500)
|
|
|
|
|
|
|
|
|
|
// load images...
|
|
|
|
|
// XXX not allowed...
|
|
|
|
|
//$.getJSON('images.js', loadImages})
|
|
|
|
|
// XXX STUB
|
|
|
|
|
loadImages(image_list)
|
|
|
|
|
|
|
|
|
|
// setup the dragging framework...
|
|
|
|
|
// XXX make this work seamlessly with touchSwipe...
|
|
|
|
|
// XXX cancel clicks while dragging...
|
|
|
|
|
$('.field').draggable()
|
|
|
|
|
|
|
|
|
|
// set the default position and init...
|
|
|
|
|
$('.current.image').click()
|
|
|
|
|
|
|
|
|
|
// XXX get the timing right
|
|
|
|
|
// XXX fire this when all is done, via an event...
|
|
|
|
|
$('.loading').delay(500).fadeOut(700)
|
|
|
|
|
}
|
|
|
|
|
$(document).ready(setup);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
2012-08-05 22:56:14 +04:00
|
|
|
<body>
|
2012-08-05 22:53:38 +04:00
|
|
|
<div class="viewer no-single-image-transitions">
|
|
|
|
|
<div class="loading">
|
|
|
|
|
<!-- XXX replace this with a background-image logo... -->
|
|
|
|
|
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
|
|
|
|
<big><b>ImageGrid</b></big><br>
|
|
|
|
|
<small><i>loading...</i></small>
|
|
|
|
|
</td></tr></table>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controller-mini left">
|
|
|
|
|
<div class="screen-button show-controls">*</div>
|
|
|
|
|
<div class="screen-button"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controller left">
|
|
|
|
|
<div class="screen-button demote">^</div>
|
|
|
|
|
<div class="screen-button prev-image"><</div>
|
|
|
|
|
<div class="screen-button promote">v</div>
|
|
|
|
|
<div class="screen-button toggle-single">[ ]</div>
|
|
|
|
|
<div class="screen-button fit-three">ooo</div>
|
|
|
|
|
<div class="screen-button settings">?</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="field">
|
|
|
|
|
<div class="ribbon">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="h-marker"></div>
|
|
|
|
|
<div class="v-marker"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controller-mini right">
|
|
|
|
|
<div class="screen-button settings">?</div>
|
|
|
|
|
<div class="screen-button"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controller right">
|
|
|
|
|
<div class="screen-button demote">^</div>
|
|
|
|
|
<div class="screen-button next-image">></div>
|
|
|
|
|
<div class="screen-button promote">v</div>
|
|
|
|
|
<div class="screen-button zoom-in">+</div>
|
|
|
|
|
<div class="screen-button zoom-out">-</div>
|
|
|
|
|
<div class="screen-button toggle-wide">...</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 nowrap : -->
|
