mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
added full screen view, does not know about resizing yet...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
0f975b271d
commit
c12bc798b9
137
ui/fullscreen.html
Executable file
137
ui/fullscreen.html
Executable file
@ -0,0 +1,137 @@
|
|||||||
|
<!--
|
||||||
|
-->
|
||||||
|
|
||||||
|
<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...
|
||||||
|
setupKeyboard()
|
||||||
|
setupGestures()
|
||||||
|
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>
|
||||||
|
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
||||||
|
<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 : -->
|
||||||
@ -84,8 +84,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 900px;
|
width: 900px;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
border: solid blue 5px;
|
|
||||||
margin: 20px;
|
|
||||||
|
|
||||||
background: white;
|
background: white;
|
||||||
|
|
||||||
@ -104,7 +102,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
||||||
height: 500px;
|
height: 100%;
|
||||||
|
|
||||||
/* keep these on top of the normal elements but below the high
|
/* keep these on top of the normal elements but below the high
|
||||||
* visibility 9000+ crowd...
|
* visibility 9000+ crowd...
|
||||||
|
|||||||
@ -7,6 +7,20 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="markers.css">
|
<link rel="stylesheet" href="markers.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.viewer {
|
||||||
|
margin: 20px;
|
||||||
|
border: solid blue 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
<script src="jquery.js"></script>
|
<script src="jquery.js"></script>
|
||||||
<script src="jquery-ui-1.8.22.custom.min.js"></script>
|
<script src="jquery-ui-1.8.22.custom.min.js"></script>
|
||||||
@ -31,7 +45,7 @@ function setup(){
|
|||||||
setDefaultInitialState()
|
setDefaultInitialState()
|
||||||
|
|
||||||
// XXX
|
// XXX
|
||||||
//setBackgroundMode('dark')
|
setBackgroundMode('dark')
|
||||||
|
|
||||||
// setup event handlers...
|
// setup event handlers...
|
||||||
setupKeyboard()
|
setupKeyboard()
|
||||||
|
|||||||
5
ui/ui.js
5
ui/ui.js
@ -131,7 +131,6 @@ function alignRibbon(image, position){
|
|||||||
|
|
||||||
/* Set the transform-origin to the center of the current view...
|
/* Set the transform-origin to the center of the current view...
|
||||||
*/
|
*/
|
||||||
// XXX this appears to be wrong....
|
|
||||||
function centerOrigin(){
|
function centerOrigin(){
|
||||||
var mt = parseFloat($('.field').css('margin-top'))
|
var mt = parseFloat($('.field').css('margin-top'))
|
||||||
var ml = parseFloat($('.field').css('margin-left'))
|
var ml = parseFloat($('.field').css('margin-left'))
|
||||||
@ -171,7 +170,6 @@ function centerOrigin(){
|
|||||||
|
|
||||||
// XXX need to make this work for % values...
|
// XXX need to make this work for % values...
|
||||||
// XXX make this usable as an event handler for .resize(...) event...
|
// XXX make this usable as an event handler for .resize(...) event...
|
||||||
// XXX this does not account for scale correctly...
|
|
||||||
function fieldSize(W, H){
|
function fieldSize(W, H){
|
||||||
var oW = $('.container').width()
|
var oW = $('.container').width()
|
||||||
var oH = $('.container').height()
|
var oH = $('.container').height()
|
||||||
@ -234,7 +232,6 @@ function getElementScale(elem){
|
|||||||
function setElementScale(elem, scale){
|
function setElementScale(elem, scale){
|
||||||
}
|
}
|
||||||
|
|
||||||
// XXX this appears to be broken -- for some reason the current scale does not change...
|
|
||||||
function scaleContainerBy(factor){
|
function scaleContainerBy(factor){
|
||||||
var scale = getElementScale($('.field'))*factor
|
var scale = getElementScale($('.field'))*factor
|
||||||
|
|
||||||
@ -271,7 +268,7 @@ function fitThreeImages(){
|
|||||||
var W = $('.container').width()
|
var W = $('.container').width()
|
||||||
|
|
||||||
var h = $('.image.current').height()
|
var h = $('.image.current').height()
|
||||||
// XXX cheating, need to get three widths...
|
// NOTE: this is cheating, need to get actual three widths...
|
||||||
var w = $('.image.current').width()*3
|
var w = $('.image.current').width()*3
|
||||||
|
|
||||||
var f = Math.min(H/h, W/w)
|
var f = Math.min(H/h, W/w)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user