mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-03 21:00:14 +00:00
214 lines
4.8 KiB
HTML
Executable File
214 lines
4.8 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="transitions.css">
|
|
<link rel="stylesheet" href="gallery.css">
|
|
<!-- this must come after the transitions.css to work correctly -->
|
|
<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="jstorage.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="persistance.js"></script>
|
|
|
|
<script src="markers.js"></script>
|
|
|
|
<!-- keep this after anything it uses -->
|
|
<script src="keybindings.js"></script>
|
|
|
|
|
|
<!--script src="gallery.js"></script-->
|
|
|
|
<script>
|
|
|
|
|
|
// XXX stub DnD handlers...
|
|
$(document)
|
|
.bind('dragover', function(e){
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
// XXX is there a jQuery way out of this??
|
|
e.originalEvent.dataTransfer.dropEffect = 'copy' // Explicitly show this is a copy.
|
|
|
|
overlayMessage('Drop files anywhere on the the screen...')
|
|
})
|
|
.bind('drop', function(e){
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
|
|
// XXX is there a jQuery way out of this??
|
|
var files = e.originalEvent.dataTransfer.files
|
|
|
|
// XXX should we be using the loadJSON here???
|
|
// XXX desperatly need image caching and preview generation...
|
|
|
|
$('.field').children('.ribbon').remove()
|
|
var ribbon = $('<div class="ribbon"></div>')
|
|
.appendTo($('.field'))
|
|
|
|
for (var i = 0, f; f = files[i]; i++) {
|
|
|
|
if (!f.type.match('image.*')) {
|
|
continue
|
|
}
|
|
|
|
var reader = new FileReader()
|
|
reader.onload = function(i, ribbon){
|
|
return function(e){
|
|
// XXX need to avoid data URLs here and use plain old paths...
|
|
ribbon.append(makeImage(e.target.result, i))
|
|
$('.image').first().click()
|
|
// XXX really UGLY and bad...
|
|
ImageGrid.image_data = buildJSON()
|
|
}
|
|
}(i, ribbon)
|
|
reader.readAsDataURL(f)
|
|
}
|
|
|
|
$('.image').first().click()
|
|
|
|
$('.overlay').click()
|
|
|
|
})
|
|
|
|
|
|
|
|
function setup(){
|
|
// XXX load state...
|
|
// initial state (default)...
|
|
setDefaultInitialState()
|
|
|
|
// XXX
|
|
ImageGrid.toggleSingleImageMode('off')
|
|
ImageGrid.toggleTransitions('on')
|
|
|
|
// setup event handlers...
|
|
setupEvents()
|
|
setupControlElements()
|
|
|
|
// XXX
|
|
//fieldSize(800, 500)
|
|
|
|
// load images...
|
|
// XXX not allowed...
|
|
//$.getJSON('images.js', loadImages})
|
|
|
|
ImageGrid.load(null, image_list)
|
|
|
|
// set the default position and init...
|
|
$('.current.image').click()
|
|
|
|
// XXX get the timing right
|
|
// XXX fire this when all is done, via an event...
|
|
$('.splash').delay(500).fadeOut(700)
|
|
}
|
|
$(document).ready(setup);
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="viewer no-single-image-transitions">
|
|
|
|
<!-- Splash screen -->
|
|
<div class="splash">
|
|
<!-- 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>
|
|
|
|
<!-- overlay -->
|
|
<div class="overlay noSwipe">
|
|
<div class="background">
|
|
</div>
|
|
<div class="content">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- info display -->
|
|
<div class="info">
|
|
<div class="top-left"></div>
|
|
<div class="top-right"></div>
|
|
<div class="bottom-left"></div>
|
|
<div class="bottom-right"></div>
|
|
</div>
|
|
|
|
<!-- button bars -->
|
|
<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>
|
|
|
|
<!-- image container -->
|
|
<div class="container">
|
|
<div class="field">
|
|
<div class="current-indicator">
|
|
<div></div>
|
|
</div>
|
|
<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 : -->
|