flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added full screen view, does not know about resizing yet...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-05 22:53:38 +04:00
parent 0f975b271d
commit c12bc798b9
4 changed files with 154 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
ui/fullscreen.html Executable file
View 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">&lt;</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">&gt;</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 : -->

4
ui/gallery.css
View File

@ -84,8 +84,6 @@
position: relative;
width: 900px;
height: 500px;
border: solid blue 5px;
margin: 20px;
background: white;
@ -104,7 +102,7 @@
overflow: hidden;
width: 50px;
height: 500px;
height: 100%;
/* keep these on top of the normal elements but below the high
* visibility 9000+ crowd...

16
ui/gallery.html
View File

@ -7,6 +7,20 @@
<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-ui-1.8.22.custom.min.js"></script>
@ -31,7 +45,7 @@ function setup(){
setDefaultInitialState()
// XXX
//setBackgroundMode('dark')
setBackgroundMode('dark')
// setup event handlers...
setupKeyboard()

5
ui/ui.js
View File

@ -131,7 +131,6 @@ function alignRibbon(image, position){
/* Set the transform-origin to the center of the current view...
*/
// XXX this appears to be wrong....
function centerOrigin(){
var mt = parseFloat($('.field').css('margin-top'))
var ml = parseFloat($('.field').css('margin-left'))
@ -171,7 +170,6 @@ function centerOrigin(){
// XXX need to make this work for % values...
// XXX make this usable as an event handler for .resize(...) event...
// XXX this does not account for scale correctly...
function fieldSize(W, H){
var oW = $('.container').width()
var oH = $('.container').height()
@ -234,7 +232,6 @@ function getElementScale(elem){
function setElementScale(elem, scale){
}
// XXX this appears to be broken -- for some reason the current scale does not change...
function scaleContainerBy(factor){
var scale = getElementScale($('.field'))*factor
@ -271,7 +268,7 @@ function fitThreeImages(){
var W = $('.container').width()
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 f = Math.min(H/h, W/w)