2023-07-17 13:13:09 +03:00
|
|
|
<!DOCTYPE html>
|
2023-07-17 13:03:51 +03:00
|
|
|
<html>
|
2023-07-17 13:14:05 +03:00
|
|
|
<head>
|
|
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<meta charset="utf-8" />
|
2023-07-17 13:03:51 +03:00
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<title>Grid n' View</title>
|
2023-07-17 13:03:51 +03:00
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<link rel="stylesheet" href="css/grid-n-view.css" />
|
|
|
|
|
<script src="grid-n-view.js"></script>
|
2023-07-17 13:03:51 +03:00
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<style>
|
2023-07-17 13:03:51 +03:00
|
|
|
</style>
|
|
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<script>
|
2023-07-17 13:03:51 +03:00
|
|
|
</script>
|
2023-07-17 13:13:09 +03:00
|
|
|
|
2023-07-17 13:14:05 +03:00
|
|
|
</head>
|
2023-07-17 13:03:51 +03:00
|
|
|
<body onload="setup()">
|
|
|
|
|
|
2023-07-21 13:29:39 +03:00
|
|
|
<h3>ToDo</h3>
|
|
|
|
|
<pre>
|
2023-07-25 21:57:18 +03:00
|
|
|
- Lightbox: indicators:
|
|
|
|
|
- start/end (a-la ImageGrid.Viewer)
|
|
|
|
|
- next/prev
|
|
|
|
|
- <s>count</s>
|
|
|
|
|
- <s>selection</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- <s>Gallery: Adaptable image justification in grid</s>
|
|
|
|
|
- Can we make this passive??? (i.e. CSS only)
|
2023-07-21 14:40:30 +03:00
|
|
|
- <s>Make more accurate -- align right side to pixel...</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- <s>Gallery: Spacial navigation (up/down/left/right)</s>
|
2023-07-25 21:57:18 +03:00
|
|
|
- <b>auto focus current image iff the gallery is visible</b>
|
|
|
|
|
- handle focus / tabindex (???)
|
|
|
|
|
- <s>option: .loop_images</s>
|
|
|
|
|
- <s>Up/Down: might be a good idea to select an image based on
|
|
|
|
|
longest border instead of closest center (current)...</s>
|
2023-07-22 18:41:49 +03:00
|
|
|
- Gallery: PageUp/PageDown, home/end + allow page navigation
|
2023-07-25 21:57:18 +03:00
|
|
|
- <b>Gallery: focus visible (if no current and partially scrolled)...</b>
|
2023-07-21 13:29:39 +03:00
|
|
|
- <s>Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)</s>
|
2023-07-21 14:40:30 +03:00
|
|
|
- <s>Lightbox: show selection marker</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- <b>Gallery: constructor (list of urls)</b>
|
|
|
|
|
- <b>Gallery: views</b>
|
|
|
|
|
- "make view from selection"
|
|
|
|
|
- close view
|
|
|
|
|
- multiple view stack
|
2023-07-28 21:23:00 +03:00
|
|
|
- Gallery: drag-n-drop
|
|
|
|
|
- drop files/images
|
|
|
|
|
- drag to sort
|
|
|
|
|
- <s>Gallery: remove image</s>
|
2023-07-28 23:19:39 +03:00
|
|
|
- UI: mark images for deletion + delete marked
|
2023-07-28 19:41:44 +03:00
|
|
|
- <s>Gallery: serialize / deserialize</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- <s>Lightbox: navigation (keyboard / mouse)</s>
|
2023-07-27 15:36:56 +03:00
|
|
|
- <s>Lightbox: fullscreen mode</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- Gallery: element (???)
|
|
|
|
|
- ...
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
2023-07-17 13:03:51 +03:00
|
|
|
<div class="gallery">
|
2023-07-20 21:42:17 +03:00
|
|
|
<!-- gallery: content -->
|
|
|
|
|
<div class="images">
|
|
|
|
|
<img src="images/500px/1.JPG" caption="Caption text">
|
|
|
|
|
<img src="images/500px/2.JPG">
|
|
|
|
|
<img src="images/500px/3.JPG">
|
|
|
|
|
<img src="images/500px/DSC08102.jpg">
|
|
|
|
|
<img src="images/500px/4.JPG">
|
|
|
|
|
<img src="images/500px/5.JPG">
|
|
|
|
|
<img src="images/500px/DSC08102.jpg">
|
|
|
|
|
<img src="images/500px/6.JPG">
|
|
|
|
|
<img src="images/500px/DSC08102.jpg">
|
|
|
|
|
<img src="images/500px/2.JPG">
|
|
|
|
|
<img src="images/500px/5.JPG">
|
|
|
|
|
</div>
|
2023-07-17 13:03:51 +03:00
|
|
|
<!-- lightbox -->
|
|
|
|
|
<div class="lightbox">
|
|
|
|
|
<img>
|
2023-07-27 13:26:11 +03:00
|
|
|
<div class="buttons">
|
|
|
|
|
<div class="button fullscreen"></div>
|
|
|
|
|
<div class="button close"></div>
|
|
|
|
|
</div>
|
2023-07-17 13:03:51 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
