gfwilliams / thingallery Goto Github PK

A single-file web gallery. Uses EXIF thumbnails to quickly display thumbnails for a directory with no server-side code

HTML 100.00%

thingallery's Introduction

ThinGallery

https://github.com/gfwilliams/ThinGallery

A single-file gallery webpage. This uses EXIF thumbnails, XMLHttpRequest Range headers, and your web server's own index pages to quickly display thumbnails for a directory without having to fully load every image file, and without any server-side scripting.

See it in action!

Why?

You have access to a web server, but no ability to upload/execute scripts on it
You don't want to execute scripts on your server for security/performance reasons
You have a NAS box - this may not support common server-side languages like PHP, and even if it does, it may be too slow to resize your images.
You want to serve a photo gallery off your phone with a basic web server app.

Setup

Put gallery.html in the folder that contains your photos.
Don't rename it to index.html as the web server's own index page is required in order to list the photos
Open gallery.html with a web browser, and enjoy.

Usage

Click on an image to open it
The thumbnail will be shown enlarged first (with an hourglass over it). When the full-size image is loaded it'll replace the thumbnail.
Use the left and right arrows (on screen or keyboard) to move between photos
Click the arrow in the bottom right to load the image in its own tab
Click the image, background, or scroll to close the opened image

iOS Web App

Visit the full URL in Safari, and include basic authentication if required: https://user:[email protected]/gallery.html?https://site.tld/
In Safari, choose the Add to Homescreen option to create a full-screen Web App

How it works

When there's no index.* page, the web server creates its own HTML listing of files, and the gallery loads this and scans it in order to find out what images are available.

For each JPEG image, it requests just the first 30,000 bytes, which will usually contain the image's thumbnail if it had one. If it's there, it is used - otherwise the entire image is loaded and resized (once all the other thumbnails have been scanned).

This means that in a directory of photos from a digital camera, instead of loading each ~5MB image file (and using up all your bandwidth and RAM), the gallery is loading less that a 150th of the amount of data, making it much faster to browse your files.

Future Additions

These are just some ideas - if you fancy adding them then please have a go and issue a Pull Request!

Find some Unicode that actually works nicely on all platforms (folders don't work on Linux)
Relative paths used after gallery.html? when folders are clicked on
Allow Delete + Rotate, and store the data in a cookie. Allow export as a shell script that would use ImageMagick to perform the operations when run on the server.

thingallery's People

Contributors

Stargazers

Watchers

thingallery's Issues

No image rotation

Image thumbnail is rotating properly (data from EXIF).
When clicked on specific photo, it is not rotated.
When open real picture it is rotated properly (browser knows what to do)

No thumbnails

Thumbnails are never loading for me. Using apache2 on Ubuntu.

mp4 files in gallery

Hi, I tried a bunch of different galleries but I like yours the most. I use it for my security camera, which creates a JPG and an MP4 of the same name but with .mp4 at the end instead of jpg.

What would make your gallery even better (for me at least), is if it would include a link to the MP4 file of the same name as the JPG file. I tried to code it myself but I can't get it to work right :(.

Running on local machine?

Hi there,

Great work by the way. This is perfect for a little project I am working on. I've created a simple HTML "Dashboard" for multiple local selling sites and one section is a directory to all the images I have (a local folder). I think I am running into an issue since all my files are local on my computer, even the dashboard.html

Is there a way around this or will I have to have this running on a web server?

Nginx support?

Nginx doesn't have automatic directories by default so this doesn't work as expected. Renaming to index.html doesn't display any photos.

Hide .Extension

OK, I think my last question as I'm loving this gallery and customizing everything exactly how I like it. Is there a way to hide the dot and extension (so I can basically just give each image a title and it grabs that)?

So example would be GrandCanyon.jpg just becomes GrandCanyon when it comes up in the gallery?

Hide Parent Directory Folder

Is there a way to hide the parent directory folder? It becomes useless and would rather not have it.

Can this be made as bookmarklet also?

Like for example this script creates gallery but it is slow as no thumbnails are used:
javascript:var%20sHTML="<html><head><title>gallery</title><body><center><table%20border=0>";var%20y=0;for(x=0;x<document.links.length;x++){a=document.links[x].href;%20if%20(a.match(/jpe|jpeg|jpg|bmp|tiff|tif|bmp|gif|png/i)){sHTML+='<td%20style="border-style:solid;border-width:1px"><a%20target="_new"%20href="'+a+'"><img%20border="0"%20width="100"%20src="'+a+'"></a></td>';%20if%20(!((x+1)%5))%20sHTML+="</tr><tr>"}};this.innerHTML=sHTML+"</table></center></body></html>";

How to sort images by date descending?

Hi,
is there option to sort images by name descending?
for example I have images like:
2018-08-08_21-35-36_636.jpg
2018-08-08_21-43-33_369.jpg
2018-08-08_21-43-53_525.jpg

Can we add support for compressed .svgz file format?

Hello,

I have added support for .svg file format by simply adding .svg to EXT_IMAGES

var EXT_IMAGES = [".jpg",".jpeg",".png",".svg",".svgz"];

It works nicely, including the thumbnails:

However, for .svgz files (which is simply .svg compressed by gzip), I'm getting only sand clock icons instead of thumbnails.

Interestingly, the browsing of .svgz images works just fine:

The trouble is only with thumbnails.

BTW, I have the following in /etc/httpd/conf/httpd.conf configuration to support .svgz file format:

   AddType image/svg+xml .svg .svgz
   AddEncoding gzip .svgz

How can we automatically generate thumbnails for .svgz files?

Thanks a lot!
Jirka

Ability to load a different URL?

Is there a way to configure this to load a different remote URL with directory browsing enabled? IE setting a root URL that the script will load and parse images from, instead of the current location.

This way you could set the script to be a default index page, and have it display images from a different URL on the same server.

EDIT: Yes you can, just add the initial URL you'd like to load in line 487

_} else if (EXT_OTHER.indexOf(ext)>=0) {
  addBasicThumb(thumbs, href, "/images/icon.png");_

But of course that doesn't work, just an empty space. Sorry I'm not a coder so don't know what I should be filling in to point to the icon image I'd want to use.