mirror of
				https://github.com/flynx/ImageGrid.git
				synced 2025-10-31 19:30:07 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			92 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			HTML
		
	
	
		
			Executable File
		
	
	
	
	
			
		
		
	
	
			92 lines
		
	
	
		
			2.5 KiB
		
	
	
	
		
			HTML
		
	
	
		
			Executable File
		
	
	
	
	
| 
 | |
| <!--
 | |
| -->
 | |
| 
 | |
| <link rel="stylesheet" href="gallery.css">
 | |
| <script src="jquery.js"></script>
 | |
| 
 | |
| <script src="jquery.touchSwipe.js"></script>
 | |
| <!-- script src="jquery.wipetouch.js"></script-->
 | |
| <!-- XXX this does not work on android... --> 
 | |
| <!-- script src="jquery.gestures.js"></script-->
 | |
| <!-- XXX need to figure out how to disable all the bling -->
 | |
| <!-- script src="jquery.mobile.js"></script-->
 | |
| 
 | |
| <!-- XXX STUB -->
 | |
| <script src="images.js"></script>
 | |
| <script src="gallery-prototype.js"></script>
 | |
| 
 | |
| <!--script src="gallery.js"></script-->
 | |
| 
 | |
| <script>
 | |
| </script>
 | |
| 
 | |
| <style>
 | |
| </style>
 | |
| 
 | |
| <div class="viewer">
 | |
| 	<div class="controller">
 | |
| 		<div class="demote">^</div>
 | |
| 		<div class="prev-image"><</div>
 | |
| 		<div class="promote">v</div>
 | |
| 		<div class="toggle-single">[ ]</div>
 | |
| 	</div>
 | |
| 	<div class="container">
 | |
| 		<div class="field">
 | |
| 			<div class="ribbon">
 | |
| 				<!--div class="image mock-image"></div>
 | |
| 				<div class="image mock-image"></div>
 | |
| 				<div class="image mock-image"></div-->
 | |
| 			</div>
 | |
| 		</div>
 | |
| 	</div>
 | |
| 	<div class="controller">
 | |
| 		<div class="demote">^</div>
 | |
| 		<div class="next-image">></div>
 | |
| 		<div class="promote">v</div>
 | |
| 		<div class="toggle-wide">+/-</div>
 | |
| 	</div>
 | |
| </div>
 | |
| 
 | |
| <div class="demo-buttons">
 | |
| 
 | |
| 	<button onclick="firstImage()">first (home)</button>
 | |
| 	<button onclick="prevImage()">prev (left)</button>
 | |
| 	<button onclick="nextImage()">next (right)</button>
 | |
| 	<button onclick="lastImage()">last (end)</button>
 | |
| 
 | |
| 	<br><br>
 | |
| 
 | |
| 	<button onclick="showSingle()">single</button>
 | |
| 	<button onclick="showRibbon()">ribbon</button>
 | |
| 	<button onclick="toggleRibbonView()">toggle ribbon view (f)</button>
 | |
| 
 | |
| 	<br><br>
 | |
| 
 | |
| 	<button onclick="toggleWideView()">toggle wide view</button>
 | |
| 
 | |
| 	<br><br>
 | |
| 
 | |
| 	<button onclick="createRibbonAbove()" disabled>create ribbon above (helper)</button><br>
 | |
| 	<button onclick="createRibbonBelow()" disabled>create ribbon below (helper)</button>
 | |
| 
 | |
| 	<br><br>
 | |
| 
 | |
| 	<button onclick="mergeRibbonsUp()">merge ribbons up</button><br>
 | |
| 	<button onclick="mergeRibbonsDown()">merge ribbons down</button>
 | |
| 
 | |
| 	<br><br>
 | |
| 
 | |
| 	<button onclick="shiftImageUp()">demote image (shift-up)</button><br>
 | |
| 	<button onclick="shiftImageDown()">promote image (shift-down)</button><br>
 | |
| 	NOTE: ctrl-shift-up / ctrl-shift-down will demote / promote an image to a new empty ribbon (the default if no ribbon exists)
 | |
| 
 | |
| 	<br><br>
 | |
| 
 | |
| 	<button onclick="focusAboveRibbon()">focus above ribbon (up)</button><br>
 | |
| 	<button onclick="focusBelowRibbon()">focus below ribbon (down)</button>
 | |
| 
 | |
| </div>
 | |
| 
 | |
| <!-- vim:set ts=4 sw=4 nowrap : -->
 |